使用 javascript 覆盖 css 文件的“动态”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{...}

我在页面中有一些“选择”标签“更改主题”。这是一个极简的例子，在实际情况中，“主题”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

是否可以用一些 javascript 来做我想做的事情？我的意思是，是否可以循环当前页面的 css 规则并向每个选择器规则添加字符串“#idOfElement”？是的。使用 javascript，您可以访问和修改样式表的内容。例如，如果您只有一个StyleSheet，您可以像这样引用它：document.styleSheets[0]每个StyleSheet都有一个CSSRuleList- 一个类似数组的对象，其中包含有序的对象集合CSSRule：document.styleSheets[0].cssRules每个CSSRule属性中都有一个selectorText属性。因此，如果您想引用第selectorText一个的 CSSRule第一个 StyleSheet，您可以使用：document.styleSheets[0].cssRules[0].selectorText // .selector1工作示例：const myCSSRules = document.styleSheets[0].cssRules;for (let CSSRule of myCSSRules) {&nbsp; CSSRule.selectorText = '#my-element ' + CSSRule.selectorText;&nbsp; console.log(CSSRule.selectorText);}.selector1 {&nbsp; color: red;&nbsp; font-weight: 700;}.selector2 {&nbsp; color: blue;&nbsp; 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">&nbsp; <p class="selector1">Selector 1</p>&nbsp; <p class="selector2">Selector 2</p></div>

Answer 2

document.head.removeChild()可以使用和方法动态删除或添加 CSS document.head.appendChild()。要即时删除现有的 css 文件：var redTheme = document.getElementById('red-theme-css')document.head.removeChild(redTheme)要动态添加新的 css 文件：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 文件必须以这样的方式编写：它具有仅适用于特定组件的类。