使用JavaScript创建新样式表和新样式规则

使用JavaScript创建新样式表和新样式规则可以非常方便地对网页进行样式控制和动态效果的实现。下面是创建新样式表和新样式规则的完整攻略。

创建新样式表

通过JavaScript可以动态地创建新的样式表，创建方式如下：

// 创建新的样式表
var style = document.createElement('style');
style.type = 'text/css';
document.head.appendChild(style);

这段代码通过JavaScript创建了一个新的style标签并将其添加到了HTML页面的头部（head）内，这个style标签就是新的样式表。在这之后，你可以使用JavaScript来向这个样式表中添加新的样式规则。

创建新样式规则

使用JavaScript创建新的样式规则需要遵循一定的格式，格式如下：

// 创建新的样式规则
var sheet = document.createElement('style').sheet;
sheet.insertRule("选择器{样式规则}", 0);

上述代码中，选择器和样式规则请按照CSS的规范进行书写，选择器和样式规则之间用大括号（{}）包裹起来，并用分号（；）隔开。第二行代码实际上是在创建一个名为sheet的CSSStyleSheet对象，并在这个对象中动态插入了一个新的规则。sheet.insertRule()方法接收两个参数：第一个参数是一个字符串，表示新规则的选择器和样式规则，第二个参数是一个整数，指示新规则插入到样式表中的位置。

下面是一个添加新样式规则的示例，他会给页面上所有的p标签添加一个边框：

var sheet = document.createElement('style').sheet;
sheet.insertRule("p { border: 1px solid red; }", 0);

为了让大家更好地理解如何动态添加CSS规则，再给一个示例。这个示例会根据用户点击的不同按钮来切换样式：

// 获取页面上的按钮元素
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");

// 获取样式表
var sheet = document.styleSheets[0];

// 添加新的样式规则
sheet.insertRule("p { font-size: 12px; }", 0);

// 为按钮添加事件监听器
button1.addEventListener("click", function() {
  sheet.insertRule("p { color: red; }", 0);
});

button2.addEventListener("click", function() {
  sheet.insertRule("p { color: blue; }", 0);
});

这个示例会在样式表中添加一个默认的样式规则（font-size: 12px），然后为两个按钮添加事件监听器。当用户点击button1时，脚本会动态添加一个新的样式规则（color: red），从而改变所有p标签的字体颜色为红色；当用户点击button2时，脚本又会动态添加一个新规则（color: blue），从而将所有p标签的字体颜色改为蓝色。

可以看到，通过JavaScript动态创建新的样式表和样式规则，可以轻松实现很多CSS效果的动态变化，为页面添加更加丰富的交互效果。