Javascript 访问样式属性"；内容“；关于a:before伪选择器

我在一个页面上有大约250个字体图标，我想通过编程为每个图标提取Unicode值

典型图标具有如下对应的CSS：

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

到目前为止我所尝试的…

document.querySelectorAll（“[class^=icon-]”）

来访问图标（现在调用每个图标

i

）

i.style

尝试访问样式对象。问题是

i.style.content

值为空

我还尝试通过

document.querySelectorAll（'[class^=icon-]：before'）

的方式访问内容，但这会产生一个空结果

感谢您的帮助。谢谢。

给你：

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
    );
});

（为了直观地显示结果，增加了一些复杂性）

---

至于提取Unicode值，您没有指定所需的格式（除非您只是想获取字符串内容），但是如果您需要代码点，您可以应用于上面字符串的每个字符，以找到它们的代码点，并按照您的意愿处理它们。

可能重复的“重复”部分显然是在询问如何操纵CSS。这个问题是关于阅读CSS的。它们可能有相同的答案，但仍然有两个截然不同的问题。我认为psuedo元素（

：hover

，

：before

等），因为它们实际上不存在于DOM中，无法使用普通的选择器查询来选择。我相信实现您正在尝试的功能的唯一方法是通过读取样式表本身而不是呈现页面来访问它。下面是一个答案，解释了你如何做到这一点：