使用 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) {

  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>

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 文件必须以这样的方式编写：它具有仅适用于特定组件的类。