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

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

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

我的解决方案是这样。

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

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

是否有人想出一种解决此问题的更好方法。

谢谢。

最佳答案

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

句法

stylesheet.insertRule(rule, index)

参量


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


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