javascript - 访问 :before pseudo selector 上的样式属性 "content"

Question

我在一个页面上有大约 250 个字体图标，我想以编程方式提取每个图标的 Unicode 值。

典型的图标有相应的 CSS，如下所示:

.icon-play:before {
    content: "\f04b";
}

到目前为止我尝试了什么......

document.querySelectorAll('[class^=icon-]') 以访问图标(现在将每个图标称为 i)。 i.style 尝试访问样式对象。问题是 i.style.content 值为空。

我也尝试以这种方式访问​​内容 document.querySelectorAll('[class^=icon-]:before') 但这会产生一个空结果。

感谢任何帮助。谢谢。

Answer 1

给你:

var is = document.querySelectorAll('[class^=icon-]');
[].forEach.call(is, function (i) {
    console.log(
        window.getComputedStyle(i, ':before').content.slice(1, -1) // Strip off surrounding quotes
    );
});

JSFiddle (为了直观地显示结果而增加了一些复杂性)

就提取 Unicode 值而言，您没有指定所需的格式(除非您只是想获取字符串内容)，但如果您需要代码点，可以应用 charCodeAt()到上面字符串的每个字符，找出它们的代码点并根据需要处理它们。