从Javascript更改CSS规则集

是否可以动态更改CSS规则集（例如，当用户单击小部件时，某些JS会更改CSS规则集）

---

这个特定的CSS规则集应用于页面上的许多元素（通过类选择器），我想在用户单击小部件时对其进行修改，以便所有具有类的元素都可以更改。

您可以更改，但这相当麻烦。关于如何做到这一点的最佳参考是以下文章：（）

---

我设法让它与Firefox和IE一起工作——在Chrome中我做不到，尽管它似乎支持DOM方法。报告说它也可以在Chrome中使用。

虽然

setAttribute

很好，但在大多数浏览器中都有一种标准的方法可以做到这一点：

htmlElement.className = 'someClass';

要在多个元素上执行此操作，您需要跨浏览器解决方案：

function getElementsByClassName( className, context, tagName ) {
  context = context || document;
  if ( typeof context.getElementsByClassName === 'function' )
    return context.getElementsByClassName( className );

  if ( typeof context.getElementsByTagName !== 'function' )
    return [];

  var elements = typeof tagName === 'string' ? context.getElementsByTagName( tagName ) :
    context.getElementsByTagName('*'),
  ret = [];
  for ( var i = 0, il = elements.length; i < il; i++ )
    if ( elements[ i ].className.match( className ) )
      ret.push( elements[ i ] );

  return ret;
}

var elements = getElementsByClassName('someClass');

for ( var i = 0, il = elements.length; i < il; i++ )
  elements[ i ].className = 'newClass';

---

使用一些正则表达式，但在这种情况下必须转义特殊字符。

根据您试图实现的目标，更好的解决方案可能是将类更改/添加到包含元素（body可以！），并相应地定义类

.yourclass{color:black}
#wrapper.foo.yourclass{color:red}
#wrapper.bar.yourclass{color:blue}

那你就可以用

document.getElementById（'wrapper'）.className='foo'；

---

（或者您选择的js框架的包装器也是如此）用class

yourclass

更改所有内容，无论

wrapper

元素是什么。

遗憾的是，用js编辑样式表的API在不同浏览器之间并不一致。试图消除这些差异，以便您可以利用这些差异。如果您不想使用YUI本身，您也可以查看它的工作原理。

我通过@alex gyoshev comment的链接尝试了该代码，但它不起作用

在Chrome中使用Google字体时，它在CSS规则上失败

它在FireFox安全检查中失败

所以我稍微修改了一下，但是删除了

delete

功能，因为我不需要它。登录IE 11、FireFox 32、Chrome 37和Opera 26

函数getCSSRule（ruleName）{//返回请求的样式对象
ruleName=ruleName.toLowerCase（）；//将测试字符串转换为小写。
var样式表；
变量i、ii；
var cssRule=false；//初始化cssRule。
var-cssRules；
if（document.styleSheets）{//if浏览器可以使用样式表
对于（i=0；i

这是一个完全基于Pwn CSS和Javascript的现代版本。是ES6，我希望你不介意

function getCSSRule(ruleName) {
    ruleName = ruleName.toLowerCase();
    var result = null;
    var find = Array.prototype.find;

    find.call(document.styleSheets, styleSheet => {
        result = find.call(styleSheet.cssRules, cssRule => {
            return cssRule instanceof CSSStyleRule 
                && cssRule.selectorText.toLowerCase() == ruleName;
        });
        return result != null;
    });
    return result;
}

此函数返回一个CSSStyleRule，您可以这样使用：

var header = getCSSRule('#header');
header.style.backgroundColor = 'red';

另外，document.styleSheets列出CSSStylesSheets对象的引用。访问页面中特定sytleSheet的另一种方法是将id分配给html代码中的style或link元素，并使用document.getElementById（'my-style'）.sheet在javascript中获取它。以下是一些有用的方法：

主要浏览器和IE9+：insertRule（）、deleteRule（）、removeProperty（）

主要浏览器，火狐？和IE9+：setProperty（）

---

给你的样式标签一个id，比如

如果有人在为你设计你的风格
告诉那个人给样式标签一个id-
这样您就可以直接访问它，而无需
到处乱跑，想知道它的指数是多少

// create a hash table
var cssHash = {};

// loop through and populate the hash table
for (let i in (r = ss0.sheet.rules)) {

    // selectorText is the name of the rule - set the value equal to the rule
    cssHash[r[i].selectorText] = r[i];

}

现在您有了样式表中所有内容的哈希表-
请注意，有些值将是未定义的，但对于
你关心的任何事情

例如，如果您有一个名为#menuItem的类
如果要将其颜色更改为黑色，请执行此操作

cssHash['#menuItem'].style.color = #000;

该行将设置规则样式的颜色
在哈希表（cssHash）中查找其索引
名字叫“menuItem”

更重要的是，您可能有几个不同的
要一次全部更改的类
有点像你在大学转专业的时候

假设你有四门不同的课
你想设置他们所有的背景色
与某个用户从输入中选择的值相同

颜色选择器标签是

您要更改的类规则被调用
#menuItem.homeAddr span和#真空：悬停

您可以在文档样式表中编辑类，如下所示

[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
     .style.background= 'red';


函数编辑（）{
[…document.styleSheets[0].cssRules].find（x=>x.selectorText=='.box'）
.style.background='red'；
}
.box{
利润率：10px；
填充：10px；
背景：黄色；
}
点击我
我的盒子1
我的盒子2
我的方框3
查看一些答案，似乎对您的问题的含义有些困惑。“CSS类”不存在这一事实并没有帮助，但两种不同的东西通常会被错误地描述。一个是“一个HTML类”，但我想你指的是另一个-CSS规则集（在本例中，带有一个类选择器）。我指的是一个用于类选择器的CSS规则集相关-以下是一些来自MDC的引用：在Chrome11中测试
cssHash['#menuItem'].style.color = #000;

// create a listener for that color selector
bColor.addEventListener('input', function (e) {

  // loop through a split list of the four class names
  '#menuItem .homeAddr span #vacuum:hover'.split(' ').forEach(function (obj) {

    // use the hash table to look up the index of each name
    // and set the background color equal to the color input's value
    cssHash[obj].style.backgroundColor = bColor.value;

  });

}, false); // false added here for the sake of non-brevity

[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
     .style.background= 'red';