動態更改元素顏色的最佳方法

-1

哪種方法更有效地更改對象的顏色？用於實施例I將使用一個元件動態更改元素顏色的最佳方法

1）添加元素與jQuery一個類時，它的裝載（去除其他顏色，可能是有的話）

var element = $('div'); 
 
element.removeClass("red"); 
 
element.removeClass("blue"); 
 
element.removeClass("green"); 
 

 
var newColor = "red green or blue"; 
 
element.addClass(newColor);

<div></div>

2 ）添加一個顏色的字段並使用css選擇器來檢查它

div[data-color=green] { 
 
    background-color: green; 
 
    } 
 

 
div[data-color=red] { 
 
    background-color: red; 
 
    } 
 

 
div[data-color=green] { 
 
    background-color: blue; 
 
    }

<div data-color="green"></div>

哪個更好？有沒有更好的方法，我沒有提到？謝謝！

來源

2016-08-18 Guy Morag

定義「最好」 ... –

儘管這個問題太寬泛了，但我想建議第二種方法作爲DOM上不需要的重載使用 –

10從分離關注的角度來看，應該通過更改元素的類名來改變樣式。請注意，新創建的元素還沒有類，所以不需要從新創建的div中移除3種顏色。另外，您可以將className設置爲空字符串，以同時從元素中刪除所有類。樣式的數據屬性看起來很奇怪，因爲你基本上只是重新創建類應該做的事情。內聯樣式應該始終是最後的手段，就像電子郵件一樣。（由於擔心分離，未來更輕鬆的重組等） – Shilly

兩種方法都相當一致，但是，我心目中的第一選擇是不是搞亂與自定義屬性或類，而是直接改變了內聯樣式：

var el = $('el') 
el.css('background-color', '#FF0000')

來源

2016-08-18 11:43:13 Roberrrt

動態更改元素顏色的最佳方法

回答

相關問題