立即更改或交換多個HTML元素的CSS

我有大約100 <span class="foo">,100 <span class="bar">和100 <span class="baz">標記在我的文檔中。我需要在JavaScript中實現以下操作：立即更改或交換多個HTML元素的CSS

將背景全部改爲紅色，所有酒吧改爲綠色，所有酒吧改爲藍色。
將背景全部改爲綠色，所有酒吧改爲藍色，所有酒吧改爲紅色。
將背景全部改爲藍色，所有酒吧改爲紅色，所有酒吧改爲綠色。

我會打電話一共約1000次這些操作，所以我想避免每個我的工作時間追加<style>標籤的<head>的解決方案。

有沒有比遍歷所有<span>元素遍歷所有更簡單，更快或更好的方法，以及更改或附加到每個元素的DOM屬性？

來源

2010-02-21 kat

最簡單的方法是使用CSS來做到這一點，而不是改變元素的類名。考慮以下標記和CSS。

.normal .foo{ 
    background-color: #0f0; 
} 
.alternate .foo { 
    background-color: #f00; 
} 

<body class="normal"> 
    <span class="foo">hello</span> 
    <span class="bar">hello</span> 
    <span class="baz">hello</span> 
</body>

您可以簡單地使用javascript將正文中的類名從常規更改爲備用，以實現.foo元素上的顏色更改。更多規則將爲酒吧和巴斯設置顏色。

document.getElementsByTagName('body')[0].className = 'alternate';

來源

2010-02-21 15:10:53

您可以給文檔的主體一個類來確定應該使用哪種顏色配置，然後相應地簡化樣式。

如：

.configTypeOne span.foo{...} 
.configTypeTwo span.foo{...}

如果你那麼一段時間後改變在同一頁上的樣式，一小塊JS來改變類的身體將是所有的需要。

來源

2010-02-21 15:08:21

立即更改或交換多個HTML元素的CSS

回答

相關問題