javascript - 向伪元素添加图标

我正在尝试通过JavaScript将图标添加到导航中(图标会动态更改)。

这是我的代码(或JSFiddle):

var icon = document.querySelector('#icon');
icon.setAttribute('data-icon', '†');

#icon:after {
  content: attr(data-icon);
}

<div id="icon" data-icon="">
  Icon
</div>

但这不起作用，为什么呢？尝试手动编辑data-icon属性时，出现图标。否则只是图标的unicode。

最佳答案

HTML实体在CSS中没有任何意义。如果要遵循该路径，则需要先对其进行解码:

var icon = document.querySelector('#icon');
var tmp = document.createElement("span");
tmp.innerHTML = '†';
icon.setAttribute('data-icon', tmp.innerText);

#icon:after {
  content: attr(data-icon);
}

<div id="icon" data-icon="">
  Icon
</div>

...，或者，按原样键入字符(只要您的应用程序以UTF-8编写):

var icon = document.querySelector('#icon');
icon.setAttribute('data-icon', '†');

#icon:after {
  content: attr(data-icon);
}

<div id="icon" data-icon="">
  Icon
</div>

最后但并非最不重要的一点是，CSS还接受转义序列，但是您需要使用appropriate syntax。但是，这种方法似乎不适用于您的特定 Angular 色:

var icon = document.querySelector('#icon');
// Brackets added for visibility, not part of the syntax
icon.setAttribute('data-icon', '(\u0086)(\u2020)');

#icon:after {
  content: attr(data-icon);
}

<div id="icon" data-icon="">
  Icon
</div>

我认为这与U+2020 'DAGGER'(效果很好)是regular character的事实有关，但是您正在使用U+0086 'START OF SELECTED AREA'(未显示)的是control character。正如您在后续评论中提到的那样，您使用的是FontAwesome，并且此类库提供了自定义字体，这些字体将某些代码点映射为显示图标(尽管它们通常使用private areas来避免冲突)。

关于javascript - 向伪元素添加图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44754775/