Question

我试图通过将符号的unicode十进制代码粘贴到css content伪类的::before属性中来显示符号图标。

当我将其直接插入html时，它可以完美运行 <div class="response__info" before-att = "&#11088" after-att = "7.7">。

但是当我用javascript做同样的事情时，它向我显示代码本身而不是实际的符号 infoElement.setAttribute('before-att', '&#x2b50');

这是我的CSS

response__info::before{
content: attr(before-att);
}

Answer 1

使用unicode \ u2B50

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="paypal@redcross.org">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="text" name="amount">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_donateCC_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

document.querySelector('.response__info').addEventListener('click', event => event.target.setAttribute('before-att', '\u2B50'))

.response__info::before{
content: attr(before-att);
}

为什么显示字符代码而不是图标？

1 个答案: