js修改行内样式_js动态修改伪类样式总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_32578799/article/details/113085321

本文介绍了如何使用原生JavaScript和jQuery动态修改元素的行内样式及伪类样式。通过addRule()和insertRule()方法在样式表中添加样式，并提供代码示例进行详细解释。虽然不常用，但对于特定项目需求，掌握这一技巧很有价值。

摘要由CSDN通过智能技术生成

一、原生js动态修改伪类样式：

(1). 在 JavaScript 中，使用 addRule() 方法可以为样式表增加一个样式。用法如下：

styleSheets.addRule(selector, style, index)

参数说明如下：
styleSheets 表示样式表引用，参数说明如下：
selector：表示样式选择符，以字符串的形式传递；
style：表示具体的声明，以字符串的形式传递；
index：表示一个索引号，表示添加样式在样式表中的索引位置，默认为 -1，表示位于样式表的末尾，该参数可以不设置；

(2). Firefox 支持使用 insertRule() 方法添加样式。用法如下：

styleSheet.insertRule(rule, index)

参数说明如下：
rule：表示一个完整的样式字符串。
index：与 addRule() 方法中的 index 参数作用相同，但默认为 0，放置在样式表的末尾。

代码示例：

var style = document.createElement('style');
  document.head.appendChild(style);
  sheet = style.sheet;
  sheet.addRule('.box1:before', 'background-color:red;width: 5px;');
  sheet.insertRule('.box1:before{background-color:red;width: 5px;}');

二、jQuery动态修改伪类样式：

代码示例：

$('<style>.box1:before{background-color:red; width: 5px;}</style>').appendTo('head');

总结：js动态修改伪类样式，一般不常用，如果项目需要，还是很有必要学习一下~