我有一个包含选择标签的页面，该标签允许使用一些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”？
2 回答
炎炎设计
TA贡献1808条经验 获得超4个赞
是否可以用一些 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>
月关宝盒
TA贡献1772条经验 获得超5个赞
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 文件必须以这样的方式编写：它具有仅适用于特定组件的类。
添加回答
举报
0/150
提交
取消