JQuery的屬性與樣式操作
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：JQuer和MVC開發工具
作者：鄭健鵬
撰寫時間：2019年4月7日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
今天我們來學習使用JQuery 插件通過JavaScript獲取dom元素上的style屬性，我們可以動態的給元素賦予樣式屬性。在jQuery中我們要動態的修改style屬性我們只要使用css()方法就可以實作了：
.css() 方法：獲取元素樣式屬性的計算值或者設定元素的CSS屬性
獲取：
.css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
.css( propertyNames )：傳遞一組陣列，回傳一個物件結果
設定：
.css(propertyName, value )：設定CSS
.css( propertyName, function )：可以傳入一個回呼函式，回傳取到對應的值進行處理
.css( properties )：可以傳一個物件，同時設定多個樣式
注意事項：
瀏覽器屬性獲取方式不同，在獲取某些值的時候都jQuery采用統一的處理，比如顏色采用RBG，尺寸采用px
.css()方法支持駝峰寫法與大小寫混搭的寫法，內部做了容錯的處理
當一個數只被作為值（value）的時候， jQuery會將其轉換為一個字串，并添在字串的結尾處添加px，例如 .css("width",50}) 與 .css("width","50px"})一樣
下面這些代碼是獲取頁面上div的一些樣式，獲取之后在頁面加載完成的時候在控制臺一并輸出獲取到的樣式：
獲取外邊距
console.log($("#mydiv").css("margin"));
獲取背景顏色的寫法
console.log($("#mydiv").css("background-color"));
回傳rgb()值
console.log($("#mydiv").css("font-size"));
獲取尺寸，傳入CSS屬性組成的一個陣列并且回傳一個物件結果
console.log($("#mydiv").css(['width', 'height']));
jQuery的屬性與樣式之.css()與.addClass()設定樣式的區別
對于樣式的設定，我們學了addClass與css方法，那么兩者之間有什么區別？
可維護性：
.addClass()的本質是通過定義個class類的樣式規則，給元素添加一個或多個類。css方法是通過JavaScript大量代碼進行改變元素的樣式
通過.addClass()我們可以批量的給相同的元素設定統一規則，變動起來比較方便，可以統一修改洗掉。
如果通過.css()方法就需要指定每一個元素是一一的修改，日后維護也要一一的修改，比較麻煩
靈活性：
通過.css()方式可以很容易動態的去改變一個樣式的屬性，不需要在去繁瑣的定義個class類的規則。一般來說在不確定開始布局規則，
通過動態生成的HTML代碼結構中，都是通過.css()方法處理的
樣式值：
.addClass()本質只是針對class的類的增加洗掉，不能獲取到指定樣式的屬性的值，.css()可以獲取到指定的樣式值。
樣式的優先級：
css的樣式是有優先級的，當外部樣式、內部樣式和行內樣式同一樣式規則同時應用于同一個元素的時候，優先級如下
外部樣式 < 內部樣式 < 行內樣式
.addClass()方法是通過增加class名的方式，那么這個樣式是在外部檔案或者內部樣式中先定義好的，等到需要的時候在附加到元素上
通過.css()方法處理的是行內樣式，直接通過元素的style屬性附加到元素上的
通過.css方法設定的樣式屬性優先級要高于.addClass方法
總結：
.addClass與.css方法各有利弊，一般是靜態的結構，都確定了布局的規則，可以用addClass的方法，增加統一的類規則
如果是動態的HTML結構，在不確定規則，或者經常變化的情況下，一般多考慮.css()方式
這個是參考屈老師之前講解過的知識點
以下是這個頁面所使用的代碼以及頁面完成的樣式：
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/51515.html
標籤：非技術類
上一篇：回合制戰斗邏輯如何同步
下一篇：求助m_hBitmap!=0問題