为了账号安全,请及时绑定邮箱和手机立即绑定

使用 javascript 覆盖 css 文件的“动态”CSS 规则选择器

使用 javascript 覆盖 css 文件的“动态”CSS 规则选择器

萧十郎 2023-09-21 17:19:52
我有一个包含选择标签的页面,该标签允许使用一些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>


查看完整回答
反对 回复 2023-09-21
?
月关宝盒

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

查看完整回答
反对 回复 2023-09-21
  • 2 回答
  • 0 关注
  • 77 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信