从 Javascript 更改 CSS 规则集

Question

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

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

Answer 1

可以，但是比较麻烦。如何做到这一点的最佳参考是以下文章：Totally Pwn CSS with Javascript (web archive link)。

我设法让它与 Firefox 和 IE 一起工作 - 我不能在 Chrome 中，虽然它似乎支持 DOM 方法。ricosrealm 报告说它也可以在 Chrome 中工作.

Answer 2

虽然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';

您可能想要替换该行：

if ( elements[ i ].className.match( className ) )

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

Answer 3

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

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

那么你就可以使用

document.getElementById('wrapper').className='foo';

（或您选择的 js 框架的包装器）以更改带有 yourclass 类的所有内容，无论您的 wrapper 元素是什么。

Answer 4

遗憾的是，用于使用 JS 编辑样式表的 API 在浏览器中并不一致。 YUI Stylesheet Utility 试图消除这些差异，以便您可以使用它。如果您不想使用 YUI 本身，也可以查看 the source code 以了解它是如何工作的。

Answer 5

我通过@alex-gyoshev 评论中的链接尝试了代码，但它不起作用

1. 它在 Chrome 中使用 Google 字体的 CSS 规则失败
2. FireFox 安全检查失败

所以我稍微改变了它，但删除了delete 功能，因为我不需要它。已在 IE 11、FireFox 32、Chrome 37 和 Opera 26 中检查。

function getCSSRule(ruleName) { // Return requested style object
  ruleName = ruleName.toLowerCase(); // Convert test string to lower case.
  var styleSheet;
  var i, ii;
  var cssRule = false; // Initialize cssRule. 
  var cssRules;
  if (document.styleSheets) { // If browser can play with stylesheets
    for (i = 0; i < document.styleSheets.length; i++) { // For each stylesheet
      styleSheet = document.styleSheets[i];
      if (!styleSheet.href) {
        if (styleSheet.cssRules) { // Browser uses cssRules?
          cssRules = styleSheet.cssRules; // Yes --Mozilla Style
        } else { // Browser usses rules?
          cssRules = styleSheet.rules; // Yes IE style. 
        } // End IE check.
        if (cssRules) {
          for (ii = 0; ii < cssRules.length; ii++) {
            cssRule = cssRules[ii];
            if (cssRule) { // If we found a rule...
              // console.log(cssRule);
              if (cssRule.selectorText) {
                console.log(cssRule.selectorText);
                if (cssRule.selectorText.toLowerCase() == ruleName) { //  match ruleName?
                  return cssRule; // return the style object.
                }
              }
            }
          }
        }
      }
    }
  }
  return false; // we found NOTHING!
}

Answer 6

这是一个基于 Totally 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 元素，并获取它在 javascript 中使用 document.getElementById('my-style').sheet。这是一些有用的方法：

主要浏览器和 IE9+： insertRule()、deleteRule()、removeProperty()。

主要浏览器，火狐？和 IE9+： setProperty()。

<stye id="my-style" ...
....
var myStyle = document.getElementById('my-style').sheet
myStyle.insertRule('#header { background: red; }', 0);

也可以动态创建一个新的样式元素来存储动态创建的样式，我认为应该是避免冲突的方法。

Answer 7

给你的风格标签一个ID，比如<style id="ssID"> 如果有人正在为你制作你的风格 告诉那个人给样式标签一个 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];

}

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

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

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

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

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

假设你有四个不同的类 你想设置他们所有的背景颜色 到相同的值，一些用户从输入中选择

颜色选择器标签是<input id="bColor" type="color"> 并且您要更改的课程规则被称为 #menuItem .homeAddr span 和 #vacuum:hover

// 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

Answer 8

您可以按如下方式在文档样式表中编辑 CLASS

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

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

.box {
  margin: 10px;
  padding: 10px;
  background: yellow;
}

<button onclick="edit()" >Click me</button>
<div class="box" >My box 1</div>
<div class="box" >My box 2</div>
<div class="box" >My box 3</div>