jQuery的屬性與樣式之樣式操作.css()

通過JavaScript擷取dom元素上的style屬性，我們可以動态的給元素賦予樣式屬性。在jQuery中我們要動态的修改style屬性我們隻要使用css()方法就可以實作了

.css() 方法：擷取元素樣式屬性的計算值或者設定元素的CSS屬性

擷取：

1. .css( propertyName ) ：擷取比對元素集合中的第一個元素的樣式屬性的計算值
2. .css( propertyNames )：傳遞一組數組，傳回一個對象結果

設定：

1.  .css(propertyName, value )：設定CSS
2. .css( propertyName, function )：可以傳入一個回調函數，傳回取到對應的值進行處理
3. .css( properties )：可以傳一個對象，同時設定多個樣式

注意事項：

1. 浏覽器屬性擷取方式不同，在擷取某些值的時候都jQuery采用統一的處理，比如顔色采用RBG，尺寸采用px
2. .css()方法支援駝峰寫法與大小寫混搭的寫法，内部做了容錯的處理
3. 當一個數隻被作為值（value）的時候， jQuery會将其轉換為一個字元串，并添在字元串的結尾處添加px，例如 .css("width",50}) 與 .css("width","50px"})一樣

jQuery的屬性與樣式之.css()與.addClass()設定樣式的差別

對于樣式的設定，我們學了addClass與css方法，那麼兩者之間有什麼差別？

可維護性：

.addClass()的本質是通過定義個class類的樣式規則，給元素添加一個或多個類。css方法是通過JavaScript大量代碼進行改變元素的樣式

通過.addClass()我們可以批量的給相同的元素設定統一規則，變動起來比較友善，可以統一修改删除。如果通過.css()方法就需要指定每一個元素是一一的修改，日後維護也要一一的修改，比較麻煩

靈活性：

通過.css()方式可以很容易動态的去改變一個樣式的屬性，不需要在去繁瑣的定義個class類的規則。一般來說在不确定開始布局規則，通過動态生成的HTML代碼結構中，都是通過.css()方法處理的

樣式值：

.addClass()本質隻是針對class的類的增加删除，不能擷取到指定樣式的屬性的值，.css()可以擷取到指定的樣式值。

樣式的優先級：

css的樣式是有優先級的，當外部樣式、内部樣式和内聯樣式同一樣式規則同時應用于同一個元素的時候，優先級如下

外部樣式 < 内部樣式 < 内聯樣式      

1. .addClass()方法是通過增加class名的方式，那麼這個樣式是在外部檔案或者内部樣式中先定義好的，等到需要的時候在附加到元素上
2. 通過.css()方法處理的是内聯樣式，直接通過元素的style屬性附加到元素上的

通過.css方法設定的樣式屬性優先級要高于.addClass方法      

總結：

.addClass與.css方法各有利弊，一般是靜态的結構，都确定了布局的規則，可以用addClass的方法，增加統一的類規則
如果是動态的HTML結構，在不确定規則，或者經常變化的情況下，一般多考慮.css()方式      

轉載于:https://www.cnblogs.com/liaolijun/p/7305796.html