在前端开发中，我们通常使用CSS来控制网页样式。除了基本的选择器之外，CSS还提供了一种强大的机制来定义特定状态下的元素样式：伪类。
伪类是CSS选择器的一种特殊形式，它允许我们根据元素当前的状态或位置为其应用样式。例如，当用户悬停在按钮上时，我们可以改变按钮颜色来提高视觉效果。伪类是实现此目的的最佳方式之一。
但是，在某些情况下，我们需要动态地设置伪类规则，以便更好地控制元素的样式。这时候，JavaScript就派上了用场。
动态设置CSS伪类规则
通过JavaScript，我们可以在运行时动态地修改样式表，并在文档中创建新的规则。这使得我们能够动态地设置样式伪类规则。
创建样式表
首先，我们需要创建一个新的<style>标签来保存我们的新规则。我们可以使用document.createElement()方法来创建一个新的<style>元素，并将其添加到HTML文档的头部：
const style = document.createElement('style');
document.head.appendChild(style);接下来，我们可以使用sheet属性获取对新样式表的引用：
const sheet = style.sheet;
添加规则
现在我们可以添加新规则。要添加伪类规则，我们需要使用insertRule()方法。insertRule()接受两个参数：要添加的规则和规则的索引位置。
const rule = '.myButton:hover { background-color: red }';
sheet.insertRule(rule, 0);这将为所有类名为myButton的元素定义一个悬停时的红色背景颜色。
删除规则
如果我们想删除规则，可以使用deleteRule()方法。这个方法接受一个规则的索引作为参数：
sheet.deleteRule(0);
这将删除刚刚添加的规则。
示例代码
下面是完整的示例代码，演示如何在JavaScript中动态设置CSS伪类规则：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- --- ---------------------- ------- ------ ------- ---------------------- ------------ -------- ----- ----- - -------------------------------- --------------------------------- ----- ----- - ------------ ----- ---- - ---------------- - ----------------- --- --- ---------------------- --- ------------- -- - -------------------- -- ------ --------- ------- -------
在这个例子中，我们创建了一个带有.myButton类的按钮，并在鼠标悬停时将其背景颜色更改为红色。然后，我们等待5秒，然后删除规则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10616
