JavaScript新增样式规则(推荐)

JavaScript新增样式规则是指通过JavaScript语言动态添加CSS样式规则到文档中，使得网页可以根据不同的用户行为动态地改变样式。我们可以使用StyleSheet.insertRule()方法来插入一条新的CSS规则到样式表中。

下面是完整的实现过程，包含以下几个步骤：

1. 获取样式表对象

首先，我们需要获取当前文档中的样式表对象。我们可以通过document.styleSheets属性获取当前文档中的所有样式表对象数组，然后选择需要添加新规则的样式表对象。例如，我们可以通过文档中第一个样式表对象来获取其样式规则：

const styleSheet = document.styleSheets[0];

2. 添加新规则

接下来，我们可以使用StyleSheet.insertRule()方法添加新规则。我们需要传递两个参数：新增规则的文本内容和插入规则的位置。

例如，我们想要添加一个新的CSS规则，使得所有被<p>标签包裹的文本都显示为红色：

function addNewRule(selector, styles) {
  // 获取样式表对象
  const styleSheet = document.styleSheets[0];

  // 拼装CSS规则
  const rule = selector + '{' + styles + '}';

  // 插入新规则到样式表中
  styleSheet.insertRule(rule, styleSheet.cssRules.length);
}

addNewRule('p', 'color: red;');

这里我们定义了一个addNewRule()函数，用于添加新的CSS规则。在函数中，我们使用了拼装字符串的方式拼接出新规则文本，然后使用StyleSheet.insertRule()方法插入到样式表的末尾。

3. 样式修改后视觉效果

最后，当用户进行相关的操作后，我们可以调用addNewRule()函数来添加新规则，从而改变样式。例如，当用户点击一个按钮时，我们可以动态地给<p>标签添加一个font-size属性：

document.querySelector('button').addEventListener('click', function() {
  addNewRule('p', 'font-size: 20px;');
})

当用户点击按钮后，所有被<p>标签包裹的文本都会变成20像素大小的字体。

总结一下，以上就是JavaScript新增样式规则的完整攻略。通过这种方式，我们可以动态地修改样式，并使网页具有更好的交互性。