javascript - 使用 javascript 覆盖 css 文件的 'on the fly' css 规则选择器

Question

我有一个包含选择标签的页面，该标签允许使用一些javascript“动态”更改页面的css主题。
现在，我想允许更改页面中特定 html 元素的 css 样式。
例如，我有两个“主题”样式表:

/* in red theme file 'theme_red.css' */
.title{color:red;}
.text{...}

/* in blue theme file 'theme_blue.css' */
.title{color:blue;}
.text{...}

我在页面中有一些“选择”标签“更改主题”。这是一个极简主义的例子，在一个真实的案例中，'themable' html 元素的数量和样式表的数量是模块化的。
我正在寻找创建一个这样的javascript函数:(纯javascript ES6)

loadCssThemeFileOnTheFlyForSpecificHtmlElement(idOfSpecificHtmlElement, themeName){
    // 1) Insert a new link tag in the head of the page with href attribute "themeName + '.css'"
    ...

    // 2) for each css rules selector (of the css file ?), override the css selector rule like this : 
    // `.selector1` become `#idOfElement .selector1`
    // `.selector2` become `#idOfElement .selector2`
    // ...
    // `.selectorN` become `#idOfElement .selectorN`

}

我被困在函数的第 2 步 insertCssFileOnTheFly .是否可以用一些 javascript 做我想做的事情？
我的意思是，是否可以循环当前页面的 css 规则并将字符串“#idOfElement”添加到每个选择器规则中？
谢谢你的帮助

Answer 1

Is it possible to do what I want to do with some javascript ? I mean,is it possible to loop of the css rule of the current page and add toeach selector rule the string "#idOfElement "?

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

document.styleSheets[0]

每个 StyleSheet有一个 CSSRuleList - 一个类数组对象，包含 CSSRule 的有序集合对象:

document.styleSheets[0].cssRules

和每个 CSSRule在其属性中，有一个 selectorText属性(property)。
所以，如果你想引用 selectorText的 第一个 CSSRule您的 第一个 StyleSheet ， 您可以使用:

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

工作示例:

const myCSSRules = document.styleSheets[0].cssRules;

for (let CSSRule of myCSSRules) {

  CSSRule.selectorText = '#my-element ' + CSSRule.selectorText;
  console.log(CSSRule.selectorText);

}

.selector1 {
  color: red;
  font-weight: 700;
}

.selector2 {
  color: blue;
  font-weight: 700;
}

<p class="selector1">Selector 1</p>
<p class="selector2">Selector 2</p>

<div style="border: 1px dashed red; text-align:center;" id="my-element">
  <p class="selector1">Selector 1</p>
  <p class="selector2">Selector 2</p>
</div>

延伸阅读:

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