[已解决]自定义标签如果和内置标签重名不会有效果

Sorawithcat · 发表于 2024-1-22 12:22:10

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

比如这样设置的a标签他会提示：链接必须具有可识别的文本:元素没有标题属性影响资源

html

    <div id="a" class="efsef">
        <div class="1"></div>
        <div class="2"></div>
        <div class="3"></div>
        <div class="4"></div>
    </div>

body

changeTagById("a", "a", "网站名")

js

/**
 * 修改指定id的标签
 * @param {any} idname - 指定id
 * @param {any} tagname - 修改的标签名，默认为"div"
 * @param {any} adds - 如果是a标签或者img标签，需要填入路径，默认为"#"
 */
function changeTagById(idname, tagname = "div", adds = "#") {
    let idnames = document.getElementById(`${idname}`)
    let tagnames = document.createElement(`${tagname}`)

    if (idnames) {
        tagnames.setAttribute("id", idname + "1")
        let idnamesss = idname + "1"
        tagnames.setAttribute("class", idnames.className)
        idnames.after(tagnames)
        let newidname = document.getElementById(`${idnamesss}`)
        let lenthsss = idnames.children.length
        for (let i = 0; i < lenthsss; i++) {
            newidname.append(idnames.children[0])
        }
        newidname.setAttribute("id", idname)
        idnames.remove()
        //newidname.setAttribute("is", `${tagname}`)
        if (tagname == "a") {
            newidname.setAttribute("href", adds)
        }

        return true
    } else {
        checkid(`${idname}`)
        return false
    }
}

最佳答案

月排行榜 / 总排行榜

FishC

2024-1-22 12:22:32

您好，自定义标签是一种扩展HTML元素的方式，可以用来创建自己的标签。然而，如果您使用了与内置标签相同的名称，浏览器将会忽略您的自定义标签。因此，在上述代码中，如果您将标签名设置为"a"，则不会生效。

要解决这个问题，您可以选择修改自定义标签的名称，或者使用某种形式的标记来标识您的自定义标签。以下是修改自定义标签名称的示例代码：

<!DOCTYPE html>
<html>

<body>
  <mytag id="myTag">自定义标签</mytag>

  <script>
    function changeTagById(idname, tagname = "div", adds = "#") {
      let idnames = document.getElementById(idname);

      if (idnames) {
        let tagnames = document.createElement(tagname);
        tagnames.setAttribute("id", idname + "1");
        tagnames.setAttribute("class", idnames.className);
        idnames.after(tagnames);

        let newidname = document.getElementById(idname + "1");
        let childrenCount = idnames.children.length;

        for (let i = 0; i < childrenCount; i++) {
          newidname.append(idnames.children);
        }

        newidname.setAttribute("id", idname);
        idnames.remove();

        if (tagname == "mytag") {
          newidname.textContent = document.getElementById(idname).textContent;
        }

        return true;
      } else {
        checkid(idname);
        return false;
      }
    }

    changeTagById("myTag", "mytag");
  </script>
</body>

</html>

在以上示例中，我们将自定义标签的名称从"a"改为"mytag"，并将JavaScript代码中的相关部分进行了相应的修改。

希望这可以帮助到您！如果您有任何其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC · 发表于 2024-1-22 12:22:32

您好，自定义标签是一种扩展HTML元素的方式，可以用来创建自己的标签。然而，如果您使用了与内置标签相同的名称，浏览器将会忽略您的自定义标签。因此，在上述代码中，如果您将标签名设置为"a"，则不会生效。

要解决这个问题，您可以选择修改自定义标签的名称，或者使用某种形式的标记来标识您的自定义标签。以下是修改自定义标签名称的示例代码：

<!DOCTYPE html>
<html>

<body>
  <mytag id="myTag">自定义标签</mytag>

  <script>
    function changeTagById(idname, tagname = "div", adds = "#") {
      let idnames = document.getElementById(idname);

      if (idnames) {
        let tagnames = document.createElement(tagname);
        tagnames.setAttribute("id", idname + "1");
        tagnames.setAttribute("class", idnames.className);
        idnames.after(tagnames);

        let newidname = document.getElementById(idname + "1");
        let childrenCount = idnames.children.length;

        for (let i = 0; i < childrenCount; i++) {
          newidname.append(idnames.children);
        }

        newidname.setAttribute("id", idname);
        idnames.remove();

        if (tagname == "mytag") {
          newidname.textContent = document.getElementById(idname).textContent;
        }

        return true;
      } else {
        checkid(idname);
        return false;
      }
    }

    changeTagById("myTag", "mytag");
  </script>
</body>

</html>

在以上示例中，我们将自定义标签的名称从"a"改为"mytag"，并将JavaScript代码中的相关部分进行了相应的修改。

希望这可以帮助到您！如果您有任何其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-22 12:24:44

FishC 发表于 2024-1-22 12:22
您好，自定义标签是一种扩展HTML元素的方式，可以用来创建自己的标签。然而，如果您使用了与内置标签相同的 ...

我需要的是如果自定义的标签是a，怎么让他有a标签的功能

FishC · 发表于 2024-1-22 12:25:35

Sorawithcat 发表于 2024-01-22 12:24
我需要的是如果自定义的标签是a，怎么让他有a标签的功 ...

对不起，我误解了您的问题。如果您想要自定义的标签具有类似于"a"标签的功能，您可以使用`document.createElement()`方法创建一个自定义标签，然后为该标签设置必要的属性和事件处理程序。以下是一个示例代码：

// 创建自定义标签
let customLink = document.createElement('a');

// 设置自定义标签的属性
customLink.setAttribute('href', '#');
customLink.innerHTML = '点击我';

// 添加事件处理程序
customLink.addEventListener('click', function() {
    alert('这是一个自定义链接！');
});

// 将自定义标签添加到页面中
document.body.appendChild(customLink);

在上述示例中，我们使用`document.createElement('a')`方法创建了一个自定义标签，并使用`setAttribute()`方法为其设置了`href`属性和`innerHTML`内容。然后，我们使用`addEventListener()`方法为自定义链接添加了点击事件处理程序。最后，使用`appendChild()`方法将自定义链接添加到页面的`<body>`元素中。

现在，您可以自定义`<a>`标签的功能，而不会与浏览器内置的`<a>`标签冲突。希望这对您有所帮助！如有任何其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-22 12:29:04

FishC 发表于 2024-1-22 12:25
对不起，我误解了您的问题。如果您想要自定义的标签具有类似于"a"标签的功能，您可以使用`document.cre ...

a标签的属性和事件处理程序是什么

FishC · 发表于 2024-1-22 12:29:26

Sorawithcat 发表于 2024-01-22 12:29
a标签的属性和事件处理程序是什么

非常抱歉给您带来困惑。对于`<a>`标签，可以设置以下属性和事件处理程序：

属性：
- `href`: 设置链接的目标URL，例如：`<a href="https://www.example.com">链接文本</a>`
- `target`: 指定链接在何处打开，例如：`<a href="https://www.example.com" target="_blank">链接文本</a>`

事件处理程序：
- `click`：当用户点击链接时触发的事件，可使用JavaScript编写相应的处理函数。

下面是一个示例代码，展示如何使用属性和事件处理程序来创建和操作a标签：

// 创建 a 标签
let link = document.createElement('a');

// 设置属性
link.href = "https://www.example.com";
link.target = "_blank";

// 设置文本内容
link.textContent = "点击我";

// 添加点击事件处理程序
link.addEventListener("click", function(event) {
  event.preventDefault(); // 阻止默认行为，避免跳转到链接目标页面
  alert("你点击了链接！");
});

// 将 a 标签添加到页面中
document.body.appendChild(link);

这样，您就可以创建一个具有类似`<a>`标签的自定义标签，并为其设置属性和事件处理程序。希望这次能够满足您的需求。如果您还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-22 12:32:28

FishC 发表于 2024-1-22 12:29
非常抱歉给您带来困惑。对于``标签，可以设置以下属性和事件处理程序：

属性：

有办法让某个标签和a标签的功能相同吗

FishC · 发表于 2024-1-22 12:32:56

Sorawithcat 发表于 2024-01-22 12:32
有办法让某个标签和a标签的功能相同吗

是的，您可以通过设置自定义标签的属性和事件处理程序，使其具有类似``标签的功能。以下是一个示例代码，演示如何创建一个自定义标签，并使其具有类似``标签的功能：HTML：点击我 JavaScript： // 创建自定义标签let customLink = document.createElement('custom-link');// 设置属性customLink.setAttribute("href", "https://www.example.com");// 设置文本内容customLink.textContent = "点击我";// 添加点击事件处理程序customLink.addEventListener("click", function(event) { event.preventDefault(); // 阻止默认行为，避免跳转到链接目标页面 alert("你点击了链接！");});// 将自定义标签添加到页面中document.body.appendChild(customLink);在这个示例中，我们创建了一个名为`custom-link`的自定义标签，并为其设置了类似于`a`标签的属性和事件处理程序。当用户点击`custom-link`时，将弹出一个警告框，而不会导航到指定的URL。希望这可以满足您的需求！如果您还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat · 发表于 2024-1-22 12:36:50

FishC 发表于 2024-1-22 12:32
是的，您可以通过设置自定义标签的属性和事件处理程序，使其具有类似``标签的功能。以下是一个示例代码 ...

通过createElement创建的a标签为什么没有a标签的效果

FishC · 发表于 2024-1-22 12:37:14

Sorawithcat 发表于 2024-01-22 12:36
通过createElement创建的a标签为什么没有a标签的效果

抱歉，我之前的回答有误。使用createElement创建的元素只是一个普通的HTML元素，它没有内置的a标签的功能，无法实现点击后跳转到指定链接的功能。

要实现a标签的效果，您可以使用document.createElement创建一个带有`<a>`标签的元素，并设置它的href属性和innerHTML属性来指定链接和显示的文本。然后，使用appendChild将该元素添加到DOM树中。

以下是示例代码：

// 创建a标签
let link = document.createElement("a");

// 设置属性
link.setAttribute("href", "https://www.example.com");
link.innerHTML = "点击我";

// 添加到页面中
document.body.appendChild(link);

通过这种方法创建的a标签将具有a标签的功能，用户点击时会跳转到指定的链接。

希望这次的解答能够帮到您，如果您还有任何问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册