更改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

回答

相關問題