javascript - 在 :before 伪选择器上访问样式属性“内容”

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()到上面字符串的每个字符以找出它们的代码点并随心所欲地使用它们。