JavaScript 如何动态操作 CSS 样式表？

使用 JavaScript 操作 CSS 样式表

除了更改单个元素样式之外，JavaScript 还可以扩展其范围以修改 CSS 样式表本身。这种强大的功能使开发人员能够动态调整网页的视觉外观，而无需重新加载页面或创建新的样式元素。

insertRule() 方法

insertRule () 方法提供了将新规则注入现有样式表的网关。它需要两个参数：CSS 规则（字符串格式）和索引。该规则将插入样式表中的指定索引处。

示例：

const stylesheet = document.styleSheets[0];
stylesheet.insertRule('#myElement { color: red; }', 0);

deleteRule() 方法

要从样式表中删除规则，请使用deleteRule() 方法。它接受单个索引参数，指示规则在样式表中的位置。

示例：

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

通过 cssRules 属性访问规则

样式表的 cssRules 属性授予对其各个规则的访问权限。每个规则都表示为 CSSRule 对象。您可以使用循环遍历规则并修改其属性，例如样式、selectorText 和声明。

示例：

const stylesheet = document.styleSheets[0];
for (let i = 0; i < stylesheet.cssRules.length; i++) {
  const rule = stylesheet.cssRules[i];
  console.log(rule.selectorText);
  rule.style.color = 'blue';
  rule.style.backgroundColor = 'yellow';
  rule.style.fontSize = '20px';
}

通过利用这些技术，JavaScript通过动态操作 CSS 样式表，增强 Web 应用程序的灵活性和响应能力，无需页面即可实现定制的用户体验和实时调整刷新。

以上是JavaScript 如何动态操作 CSS 样式表？的详细内容。更多信息请关注PHP中文网其他相关文章！