使用JavaScript处理CSS

问题描述：

我想使用JavaScript来操纵我的CSS。首先，它被认为是一个很好的小脚本，可以为我的手风琴菜单尝试不同的颜色，以及不同的背景/标题/内容 -/...来自输入字段的背景颜色。使用JavaScript处理CSS

我明白我如何获得输入值与js。

我知道如何通过使用getElementById(),getElementsByClassName(),getElementsByTag()和getElementsByName()来操纵CSS。

现在的问题是，我的CSS是这样的：

.accordion li > a { 
    /* some css here */ 
} 
.sub-menu li a { 
/* some css here */ 
} 
.some-class hover:a { 
/* css */ 
} 
.some-other-class > li > a.active { 
/* css */ 
}

我将如何改变这种花式使用JavaScript的属性？

CSS是不与操纵'的getElementById（）''getElementsByClassName方法（）''getElementsByTag（）''getElementsByName（）' –

这是完全没有意义的问题。这就是css的用途，为什么要用另一种方式呢？ –

如果你想操作样式表，最好先阅读['styleSheets']（https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet）。 – Teemu

答

使用JavaScript无法直接操作某些CSS样式。相反，你可以改变一个stylesheet本身的规则，这样的事情：

var changeRule = function(selector, property, value) { 
     var styles = document.styleSheets, 
      n, sheet, rules, m, done = false; 
     selector = selector.toLowerCase(); 
     for(n = 0; n < styles.length; n++) { 
      sheet = styles[n];  
      rules = sheet.cssRules || sheet.rules; 
      for(m = 0; m < rules.length; m++) { 
       if (rules[m].selectorText.toLowerCase() === selector) { 
        done = true; 
        rules[m].style[property] = value; 
        break; 
       } 
      } 
      if (done) { 
       break; 
      } 
     } 
    }; 
changeRule('div:hover', 'background', '#0f0');

selector必须准确的exisiting选择匹配，只有选择文本和{之间的空间被忽略。

您可以开发代码来查找和更改选择器名称的部分命中，或只检查特定的样式表而不是全部。事实上，如果拥有数以千计的规则的样式表，它也相当昂贵。

不幸的伪元素不能用这段代码操纵。

现场演示jsFiddle。

非常感谢Teemu，这正是我想到的！ – dabe

答

所有的DOM元素都可以通过JavaScript的

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style?redirectlocale=en-US&redirectslug=Web%2FAPI%2Felement.style

或者改变一个风格对象，如果你正在使用jQuery：

http://api.jquery.com/css/

您可以针对元素和操纵他们的财产，但你不改变规则。

如果你想改变大量的样式属性，常用的方法是改变元素的类名以改变它们的外观。这可以通过className property完成，或者如果您使用的是jQuery：addClass和removeClass。

答

我用下划线实现了Teemu的答案。 http://jsfiddle.net/6pj3g/4/

var rule = _.chain(document.styleSheets) 
    .map(function(sheet){return _.flatten(sheet.cssRules)}) 
    .flatten() 
    .unique() 
    .find(function(rule){ return rule && rule.selectorText && (rule.selectorText.toLowerCase() === selector.toLowerCase())}) 
    .value() 

if (rule){ 
    rule.style[property] = value; 
} else { 
    throw 'selector not found: ' + selector; 
}

使用JavaScript处理CSS

相关推荐