更改CSS样式表使用javascript

我有以下几点：更改CSS样式表使用javascript

<style> 
    .el {color: blue;} 
</style> 

<div class="el">bla bla</div> 
<div class="el">bla bla 123</div>

，我需要使用JavaScript来改变颜色.el。我知道document.styleSheets，但似乎有点粗俗，不得不循环搜索类，我想改变它的方式。现在没有更好（更轻）的方法来做到这一点吗？类似于

document.stylesheets.getclass('.el').color = 'red';

谢谢。

来源

2013-05-13 user2079305

这可能是[有益页]（http://www.quirksmode.org/dom/changess.html）你 – George 2013-05-13 10:39:44

检查出[设置CSS伪类的规则从JavaScript @ StackOverflow]（http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript） – SolessChong 2013-05-13 10:40:25

您可以更改类，我认为这将是更好的主意。 – 2013-05-13 10:42:46

你在正确的轨道上。您正在寻找的方法是getElementsByClassName，而不是getClass。它返回一个数组，然后你只需遍历数组并分配新的颜色。

var el = document.getElementsByClassName('el'), 
    i; 

for (i = 0; i < el.length; i += 1) { 
    el[i].style.color = 'red'; 
}

Demo

P.S.，显然，这改变了风格，而不是样式。

来源

2013-05-13 10:44:30

这只是交易循环通过元素循环样式表.. – user2079305 2013-05-13 10:50:41

@ user2079305：如果您需要做循环，请使用jQuery（如$（“。el”）.css（'color'，'red'）; – 2013-05-13 10:58:24

是的，你是对的。试图直接更改样式表有很多浏览器兼容性问题，这是不切实际的。并不像您可以将更改后的样式表保存在服务器上。 – 2013-05-13 10:59:20

试试这个：

var elem = document.getElementsByClassName('el'); 
      for (var i = 0; i < elem.length; i++) { 
       elem[i].style.color = '#aaaaaa'; 
      }

来源

2013-05-13 10:52:31

更改CSS样式表使用javascript

回答

相关问题