改变 :before 使用 Javascript 进行样式设置答案

【问题标题】：Changing :before styling with Javascript改变 :before 使用 Javascript 进行样式设置
【发布时间】：2013-12-05 13:59:19
【问题描述】：

我想用js改变这个页面上星星的颜色edit:link is now dead

控制颜色的是“星级”类上的 :before，但我无法成功更改它，可能是因为它上面有重要内容。

我读过这篇文章，但没有帮助Javascript set CSS :after styles

谢谢

亚历克斯

【问题讨论】：

为什么需要js？它只能用 css 完成
我只希望它发生在某些页面上，而且我没有制作主题，所以宁愿远离 css 文件
这样您就可以创建自己的样式表或将其放在您想要的页面的顶部您是否也在寻找纯 js 或 jquery 的解决方案？
页面是由Wordpress中的插件动态创建的，只有js才能实现我想做的事情

标签： javascript css colors pseudo-element

【解决方案1】：

可能不是最好的方法，但是

s = document.createElement('style') ; 
s.innerHTML = '.star-rating span:before, .star-rating:before, .woocommerce-page .star-rating:before { color:pink !important}' ; 
document.head.appendChild(s);

即在头部添加一个样式标签，覆盖这些星星的样式。

【讨论】：

【解决方案2】：

唯一的解决方案是为这些星星移除并添加新的 DOM，或者您可以从 css 中移除 !important，然后使用 JS 进行更改。

否则使用 jquery 然后：

starDiv = document.getElementsByClassName("star-rating")[0];
$(starDiv).css('color', 'red', 'important');

【讨论】：

你可以通过使用 jquery 来做到这一点，但你没有使用 jquery