使用JS如何在title属性上输出数据？

Question

我的代码看起来像这样：

<i class="my-class" title="AB">
    ::before
</i>

我想输出标题的值AB

输出可能如下所示：

<span class="my-class">AB</span>

我一直在谷歌搜索它，但我似乎找不到任何东西。如果有人能指出我正确的方向，那就太棒了。

谢谢！

Answer 1

你不需要Javascript，CSS是适合这项工作的工具。

.my-class::before {
  content: attr(title);
}

<i class="my-class" title="AB"></i>

Answer 2

只需使用getAttribute：

var span = document.createElement("span");
span.innerText = document.querySelector(".my-class").getAttribute("title");

Answer 3

没有JavaScript

CSS允许您设置伪元素（::before和::after）的内容，如下所示：

.my-class::before {
  content: "I am some content!";
}

将它与CSS函数attr()相结合，您将能够使用元素的属性填充伪元素的内容：

.my-class::before {
  content: attr(title);
}

但请记住，如果您要在元素的内容中添加一些文本，例如

<span class="my-class" title="My Title">Hey, I am some Content!</span>

它将呈现为

我的TitleHey，我是一些内容！

使用JavaScript

使用您首选的方式访问DomElement document.getElementById，document.getElementsByClassName，document.querySelector和document.querySelectorAll都将完成这项工作。然后，使用title接收HtmlElement.getAttribute属性并将其作为字符串插入元素的textContent中：

const element = document.querySelector('.my-class');
element.textContent = element.getAttribute('title');