javascript 动态修改样式和层叠样式表代码

下面是关于"javascript 动态修改样式和层叠样式表代码"的完整攻略。

1. 动态修改样式

a. 通过 DOM 直接修改样式

我们可以使用 querySelector 和 style 属性来直接选取并修改元素的样式。例如，通过以下代码可以将 ID 为 "example" 的元素的文本颜色修改为红色：

const exampleElement = document.getElementById("example");
exampleElement.style.color = "red";

b. 通过样式类添加和删除样式

我们可以创建一些 CSS 样式类，然后通过 JavaScript 来添加到元素中。例如：

.example-class {
  color: blue;
  font-size: 16px;
}

然后，我们可以通过 classList 属性来添加和删除这些类。例如，通过以下代码可以将 ID 为 "example" 的元素同时添加两个样式类，改变其字体颜色和字体大小：

const exampleElement = document.getElementById("example");
exampleElement.classList.add("example-class");

2. 层叠样式表代码

a. 选取样式表

我们可以使用 document.styleSheets 属性来选取样式表。以下是如何选取第一张样式表的代码：

const firstStyleSheet = document.styleSheets[0];

b. 添加和删除样式规则

我们可以使用 insertRule 方法来添加样式规则，使用 deleteRule 方法来删除样式规则。例如，以下是如何向选取的第一个样式表之后加入一个 "example-style" 样式规则的代码：

const firstStyleSheet = document.styleSheets[0];
firstStyleSheet.insertRule(".example-style { color: blue; }");

剩下的就是删除样式规则的方法了。例如，通过以下代码可以删除这个样式规则：

const firstStyleSheet = document.styleSheets[0];
firstStyleSheet.deleteRule(0);

以上就是"javascript 动态修改样式和层叠样式表代码"的完整攻略，希望对你有所帮助！