更改<style>的innerHTML以添加新样式行？</style>

Question

我有一个解决我的问题的方法，但我正在寻找一种更有效的解决方法。

我基本上想要编写一个函数，用Javascript在css中添加新的样式行。

我的解决方案就是这个。

function addStyle(newStyleLine){
var mainStyle = document.getElementsByTagName("style")[0];
mainStyle.innerHTML = mainStyle.innerHTML + "body {"+newStyleLine+"}";
}

我的html中有一个<style>标记。它工作正常，但我认为当我在<style>中拥有更大的CSS时，它将不会那么高效。

是否有人想过更好的解决方法。

谢谢。

Answer 1

使用内置的方法，允许您向样式表添加新规则。

<强>语法

stylesheet.insertRule(rule, index)

<强>参数

• 规则是一个DOMString，包含要插入的规则（选择器和声明）。
• index 是一个无符号的int，表示要插入的位置。

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule