覆盖'；在飞行中'；css规则使用javascript选择css文件的选择器

我有一个包含select标记的页面，它允许使用一些javascript更改页面“动态”的css主题

现在，我想允许更改页面中特定html元素的css样式

举例来说，我有两个“主题”样式表：

/*在红色主题文件“theme\u red.css”中*/
.title{颜色：红色；}
.text{…}

/*在蓝色主题文件“theme\u blue.css”中*/
.title{颜色：蓝色；}
.text{…}

我在页面中有一些“选择”标签“更改主题”。这是一个极简主义的例子，在实际情况中，“主题化”html元素的数量和样式表的数量是模块化的

我正在寻找创建如下javascript函数：（纯javascript ES6）

为specifichtmlement（IDOFSpecifichtmlement，themeName）在第四个页面上加载CSSThemefile{
//1）在href属性为“themeName+”.css”的页面头部插入新的链接标记
...
//2）对于（css文件？）的每个css规则选择器，如下所示覆盖css选择器规则：
//`.selector1`变成`#我感觉到了。selector1`
//`.selector2`变成`#我感觉到了。selector2`
// ...
//`.selectorN`变成`#我感觉到了。selectorN`
}

我陷入了函数

insertcsfileonthfly

的第2步。有可能用一些javascript实现我想要的功能吗？ 我的意思是，是否可以循环当前页面的css规则，并在每个选择器规则中添加字符串“#idOfElement”

---

感谢您的帮助

可以使用

document.head.removeChild（）和
document.head.appendChild（）方法动态删除或添加CSS

动态删除现有css文件：

var redTheme = document.getElementById('red-theme-css')
document.head.removeChild(redTheme)

var blueTheme = document.createElement('link')
blueTheme.id = "blue-theme-css"
blueTheme.type = "text/css"
blueTheme.rel = "stylesheet"
blueTheme.href = "link-to-blue-theme-css-file"
document.head.appendChild(blueTheme)

动态添加新css文件：

var redTheme = document.getElementById('red-theme-css')
document.head.removeChild(redTheme)

var blueTheme = document.createElement('link')
blueTheme.id = "blue-theme-css"
blueTheme.type = "text/css"
blueTheme.rel = "stylesheet"
blueTheme.href = "link-to-blue-theme-css-file"
document.head.appendChild(blueTheme)

上述方法既可以用于更改整个文档的主题，也可以用于更改特定组件的主题

如果要求仅更改一个组件的样式，那么要加载的css文件必须以这样的方式编写，即它具有仅应用于特定组件的类

更多信息：

var redTheme = document.getElementById('red-theme-css')
document.head.removeChild(redTheme)

var blueTheme = document.createElement('link')
blueTheme.id = "blue-theme-css"
blueTheme.type = "text/css"
blueTheme.rel = "stylesheet"
blueTheme.href = "link-to-blue-theme-css-file"
document.head.appendChild(blueTheme)


有可能用一些javascript实现我想要的功能吗？我是说，
是否可以循环当前页面的css规则并添加到
每个选择器规则都包含字符串“#idOfElement”

对。使用javascript，您可以访问和修改样式表的内容。例如，如果只有一个
样式表
，则可以这样引用它：

document.styleSheets[0]

每个
样式表
都有一个
CSSRuleList
——一个类似数组的对象，包含
CSSRule
对象的有序集合：

document.styleSheets[0].cssRules

每个
CSSRule
在其属性中都有一个
selectorText
属性

因此，如果您想引用您的第一个
样式表的第一个

CSSRule的

选择或文本

，您可以使用：

document.styleSheets[0].cssRules[0].selectorText // .selector1

---

工作示例：

var redTheme = document.getElementById('red-theme-css')
document.head.removeChild(redTheme)

var blueTheme = document.createElement('link')
blueTheme.id = "blue-theme-css"
blueTheme.type = "text/css"
blueTheme.rel = "stylesheet"
blueTheme.href = "link-to-blue-theme-css-file"
document.head.appendChild(blueTheme)

const myCSSRules=document.styleSheets[0].cssRules；
for（让CSSRule of myCSSRules）{
CSSRule.selectorText='#我的元素'+CSSRule.selectorText；
console.log（CSSRule.selectorText）；
}

。选择器1{
颜色：红色；
字号：700；
}
.选择器2{
颜色：蓝色；
字号：700；
}

选择器1

选择器2

选择器1

选择器2

---

谢谢您的帮助！但问题不在于删除现有规则或动态添加新的css文件（我知道怎么做），这里的重点是如何通过覆盖其规则（更改所有规则，如“#idofspecificationgivinjavascriptfunction.selector1{}”）来更改整个加载（动态）css文件加载css文件将在文档级别应用样式，并且可能会影响所有组件。如果要求通过加载css文件将css动态应用于特定元素，那么要加载的css文件必须具有仅应用于特定元素的类。如果要加载的css文件有一个由多个元素使用的类，那么在加载文件后，所有这些元素都会很快受到影响。在浏览器中，jasvascript与DOM一起工作，而不是与css文件一起工作，您不能以这种方式修改css选择器您想将“蓝色”主题应用于页面上的某些元素和“红色”吗主题是什么？