狠狠橹s爽撸,伊人伊城亚洲综合,天天躁狠狠久久

樣式操作接口

jQuery操作樣式的接口 jQuery.fn.css 與 jQuery.css

我們知道實例是調用靜態的方法，css的接口參數傳遞是可以很多個組合情況的，這也符合了 jQuery “少寫多做”的原則了。

css: function(name, value ) {
        return value !== undefined ?
            jQuery.style(elem, name, value) :
            jQuery.css(elem, name);
 }

最終方法與設置樣式的方法是實例方法，所以我們看傳遞的參數就知道了，只能是單一的 elem、 name、 value 實參。

jQuery.style( elem, name, value ) :
jQuery.css( elem, name );

所以如果我們傳遞是對象或者別的方式就需要一個過濾的環節，css 參數的處理也跟之前的 attr 屬性的處理保持一致，采用了jQuery.access 方法統一調配，這個具體之前就分析了，無非就是遞歸參數，但是有個可學的設計思路，分離不同的邏輯判斷通過回調傳遞進去。

jQuery.css()取值

用戶傳遞寫 css 屬性名是可以很隨意的，backgroundColor,backgourd-color，所以框架內部自然要過這個統一的處理。

檢測是否是駝峰寫法，如果不是就得轉化下:

origName = jQuery.camelCase( name );

其次還有一些特殊的屬性名的讀取問題，比如float就是關鍵字，就需要轉成cssFloat，還有瀏覽器前綴的命名處理。

name = jQuery.cssProps[origName] || (jQuery.cssProps[origName] = vendorPropName(elem.style, origName));

我們知道元素在 display:none 的情況下是無法獲取一些跟布局定位有關的值的，還有不同的元素尺寸width、height、margin獲取問題等等，但是這么多情況如何去處理？

jQuery在這里就引入了“css鉤子”

hooks = jQuery.cssHooks[name] || jQuery.cssHooks[origName];

每一個特定方法都帶有各自的處理模式，舉個例子如果要獲取 ele.css("width")。

那么 cssHooks.width 中就是這樣一個結構：

cssHooks = {
    width:{
        get:function(){},
        set:function(){}
    }
}

我們看到 cssHooks 幾乎都是針對盒子模型的屬性處理了，我們考慮下如果用戶獲取一個元素的 width 會有什么情況？

1. 元素在隱藏 display:none 先獲取不到尺寸
2. 元素的寬度，jQuery就有width、innerWidth、outerWidth等各種不同取值方式
3. 元素可以被設置css3的盒子模型

所以針對這一種特定的屬性我們需要單獨拿一個鉤子做處理，那么在取值的時候，我們自然在 cssHooks.width.get 中要判斷一下：當元素是否是可見狀態，如果不是則要先處理下，在之后判斷盒子模型的處理。接下來我們看到如果沒有對應的鉤子方法，我們模型采用了 curCSS 取值：

if (hooks && "get" in hooks) {
    val = hooks.get(elem, true, extra);
}
if (val === undefined) {
    val = curCSS(elem, name, styles);
}

其內部就采用了 defaultView.getComputedStyle(elem, null);最終就是通過 getComputedStyle的getPropertyValue 方法了。

所以總結 jquery.css 的接口其實也很簡單。

1.轉化樣式命名
2.處理特殊的屬性比如float
3.分離出一個鉤子，用于處理跟尺寸有關的屬性
4.其余元素采用getComputedStyle獲取對應的值

任務

?不會了怎么辦

index.html

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <title></title> </head> <body> <div style="background-color:yellow;">慕課網</div> <button id="test1">jQuery.css獲取background-color</button> <button id="test2">模擬css獲取background-color</button> <ul></ul> <script type="text/javascript"> //獲取最終屬性 //https://github.com/jquery/jquery/pull/524 var getStyles = function(elem) { return elem.ownerDocument.defaultView.getComputedStyle(elem, null); }; //返回一個css屬性映射到一個瀏覽器商前綴的屬性 function vendorPropName(style, name) { // shortcut for names that are not vendor prefixed if (name in style) { return name; } // check for vendor prefixed names var capName = name[0].toUpperCase() + name.slice(1), origName = name, i = cssPrefixes.length; while (i--) { name = cssPrefixes[i] + capName; if (name in style) { return name; } } return origName; } function curCSS(elem, name, computed) { var width, minWidth, maxWidth, ret, style = elem.style; computed = computed || getStyles(elem); if (computed) { ret = computed.getPropertyValue(name) || computed[name]; } return ret; } function css(elem, name, extra, styles) { var val, num, hooks, //轉成駝峰寫法 //background-color -> backgroundColor origName = jQuery.camelCase(name); // Make sure that we're working with the right name //如果是特殊屬性float轉成cssFloat //帶有瀏覽器前綴處理 name = jQuery.cssProps[origName] || (jQuery.cssProps[origName] = vendorPropName(elem.style, origName)); hooks = jQuery.cssHooks[name] || jQuery.cssHooks[origName]; if (hooks && "get" in hooks) { val = hooks.get(elem, true, extra); } //通過computed接口直接獲取樣式 if (val === undefined) { val = curCSS(elem, name, styles); } return val; } $("#test1").click(function() { $('ul').append('<li>jQuery.css(background-color):' + $("div").css('background-color') + '</li>') }) $("#test2").click(function() { var div = document.querySelectorAll('div')[0] $('ul').append('<li>模擬css(background-color):' + css(div,'background-color') + '</li>') }) </script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

4-3 樣式操作接口

樣式操作接口

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

4-3 樣式操作接口

熱搜

最近搜索清空

樣式操作接口

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦