jQuery操作樣式的接口 jQuery.fn.css 與 jQuery.css
我們知道實(shí)例是調(diào)用靜態(tài)的方法，css的接口參數(shù)傳遞是可以很多個(gè)組合情況的，這也符合了 jQuery “少寫多做”的原則了。
css: function(name, value ) {
return value !== undefined ?
jQuery.style(elem, name, value) :
jQuery.css(elem, name);
}
最終方法與設(shè)置樣式的方法是實(shí)例方法，所以我們看傳遞的參數(shù)就知道了，只能是單一的 elem、 name、 value 實(shí)參。
jQuery.style( elem, name, value ) : jQuery.css( elem, name );
所以如果我們傳遞是對象或者別的方式就需要一個(gè)過濾的環(huán)節(jié)，css 參數(shù)的處理也跟之前的 attr 屬性的處理保持一致，采用了jQuery.access 方法統(tǒng)一調(diào)配，這個(gè)具體之前就分析了，無非就是遞歸參數(shù)，但是有個(gè)可學(xué)的設(shè)計(jì)思路，分離不同的邏輯判斷通過回調(diào)傳遞進(jìn)去。
jQuery.css()取值
用戶傳遞寫 css 屬性名是可以很隨意的，backgroundColor,backgourd-color，所以框架內(nèi)部自然要過這個(gè)統(tǒng)一的處理。
檢測是否是駝峰寫法，如果不是就得轉(zhuǎn)化下:
origName = jQuery.camelCase( name );
其次還有一些特殊的屬性名的讀取問題，比如float就是關(guān)鍵字，就需要轉(zhuǎn)成cssFloat，還有瀏覽器前綴的命名處理。
name = jQuery.cssProps[origName] || (jQuery.cssProps[origName] = vendorPropName(elem.style, origName));
我們知道元素在 display:none 的情況下是無法獲取一些跟布局定位有關(guān)的值的，還有不同的元素尺寸width、height、margin獲取問題等等，但是這么多情況如何去處理？
jQuery在這里就引入了“css鉤子”
hooks = jQuery.cssHooks[name] || jQuery.cssHooks[origName];
每一個(gè)特定方法都帶有各自的處理模式，舉個(gè)例子如果要獲取 ele.css("width")。
那么 cssHooks.width 中就是這樣一個(gè)結(jié)構(gòu)：
cssHooks = {
width:{
get:function(){},
set:function(){}
}
}
我們看到 cssHooks 幾乎都是針對盒子模型的屬性處理了，我們考慮下如果用戶獲取一個(gè)元素的 width 會(huì)有什么情況？
1. 元素在隱藏 display:none 先獲取不到尺寸 2. 元素的寬度，jQuery就有width、innerWidth、outerWidth等各種不同取值方式 3. 元素可以被設(shè)置css3的盒子模型
所以針對這一種特定的屬性我們需要單獨(dú)拿一個(gè)鉤子做處理，那么在取值的時(shí)候，我們自然在 cssHooks.width.get 中要判斷一下：當(dāng)元素是否是可見狀態(tài)，如果不是則要先處理下，在之后判斷盒子模型的處理。接下來我們看到如果沒有對應(yīng)的鉤子方法，我們模型采用了 curCSS 取值：
if (hooks && "get" in hooks) {
val = hooks.get(elem, true, extra);
}
if (val === undefined) {
val = curCSS(elem, name, styles);
}
其內(nèi)部就采用了 defaultView.getComputedStyle(elem, null);最終就是通過 getComputedStyle的getPropertyValue 方法了。
所以總結(jié) jquery.css 的接口其實(shí)也很簡單。
1.轉(zhuǎn)化樣式命名 2.處理特殊的屬性比如float 3.分離出一個(gè)鉤子，用于處理跟尺寸有關(guān)的屬性 4.其余元素采用getComputedStyle獲取對應(yīng)的值
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)