樣式操作模塊可用于管理DOM元素的樣式、坐標和尺寸，本節講解一下尺寸這一塊
jQuery通過樣式操作模塊里的尺寸相關的API可以很方便的獲取一個元素的寬度、高度，而且可以很方便的區分padding、border、 margin等，主要有六個API，如下:
- heihgt(size)、width(size) ;獲取第一個匹配元素的高度、寬度，或者通過呼叫.css(name,value)方法來設定高度、寬度， size可以是字串或者數值
- innerHeight()、innerWidth() ;獲取匹配元素集合中第一個元素的高度、寬度，包括內容content、內邊距padding，
- outerHeight(m)、outerWidth(m) ;獲取匹配元素集合中第一個元素的高度、寬度，包括內容content、內邊距padding，邊框border
舉個栗子:
writer by:大沙漠 QQ:22969969
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <style>div {width:80px;height:80px;border:10px solid #cf0;background:#333;margin:20px;padding:5px;color:#fff;}</style> <div>你好</div> <button>測驗按鈕</button> <script> console.log('width:',$('div').width()); //輸出:80 console.log('innerWidth:',$('div').innerWidth()); //輸出:90 console.log('outerWidth:',$('div').outerWidth()); //輸出:110 $('button').click(function(){ $('div').height(100) $('div').width(100) }) </script> </body> </html>
我們定義了一個 div和一個按鈕，初始化時分別列印包含div的jquery物件的Width、innerWidth和outerWidth輸出結果，控制臺輸出如下:
渲染如下:
另外我們在按鈕上系結了事件，點擊可以設定div的尺寸，點擊效果如下:
可以看到，點擊按鈕后div就變大了，這是因為我們通過width、height設定了引數，修改了它的樣式，
原始碼分析
jQuery對heihgt、width、innerHeight、innerWidth、outerHeight、outerWidth這六個API的實作是通過一個getWH()的工具函式實作的，該函式的定義:getWH(elem,name,extra)，引數如下:
- elem ;要獲取高度、寬度的DOM元素
- name ;可選字串，可以是height、width
- extra ;指示了計算寬度和高度的公式字串，可選，可以設定為padding、border和margin，
函式原始碼如下:
var cssWidth = [ "Left", "Right" ], cssHeight = [ "Top", "Bottom" ]; function getWH( elem, name, extra ) { //一個工具函式，用于獲取元素的高度、寬度，為尺寸方法.width()、.height()、.innerWidth()、innerHeight()等提供了基礎功能 // Start with offset property var val = name === "width" ? elem.offsetWidth : elem.offsetHeight, //如果引數name是width則val是elem元素的寬度，否則val是elem元素的高度 其中包含了內容content、內邊距padding、邊框border,不包含外邊距margin， which = name === "width" ? cssWidth : cssHeight, //如果引數name是width則which等于[ "Left", "Right" ]，否則等于[ "Top", "Bottom" ] i = 0, len = which.length; if ( val > 0 ) { //如果元素可見 if ( extra !== "border" ) { //引數不是border的情況下，則根據extra值的不同 選擇性的加減邊框border、內邊距padding、外邊距margin， for ( ; i < len; i++ ) { //遍歷width陣列，分別加減Leftpadding、Rightpadding等資訊 if ( !extra ) { //如果沒有傳入extra引數，則減去內邊距padding， val -= parseFloat( jQuery.css( elem, "padding" + which[ i ] ) ) || 0; } if ( extra === "margin" ) { //如果引數extra是margin,則加上外邊距margin val += parseFloat( jQuery.css( elem, extra + which[ i ] ) ) || 0; } else { //執行到這里則表示extra等于padding val -= parseFloat( jQuery.css( elem, "border" + which[ i ] + "Width" ) ) || 0; } } } return val + "px"; //最后回傳val 如果引數是border則回傳包含了內容content、內邊距padding、邊框border的高度，寬度， } //下面是元素不可見的情況，它會在計算樣式或內鏈樣式的基礎上，根據引數extra,選擇性的加上內邊距padding、邊框border、外邊框margin，有興趣可以看看 // Fall back to computed then uncomputed css if necessary val = curCSS( elem, name, name ); if ( val < 0 || val == null ) { val = elem.style[ name ] || 0; } // Normalize "", auto, and prepare for extra val = parseFloat( val ) || 0; // Add padding, border, margin if ( extra ) { for ( ; i < len; i++ ) { val += parseFloat( jQuery.css( elem, "padding" + which[ i ] ) ) || 0; if ( extra !== "padding" ) { val += parseFloat( jQuery.css( elem, "border" + which[ i ] + "Width" ) ) || 0; } if ( extra === "margin" ) { val += parseFloat( jQuery.css( elem, extra + which[ i ] ) ) || 0; } } } return val + "px"; }
我們呼叫width等jquery實體函式時并不是直接呼叫這個getWH()工具函式的，該函式函式是掛載到jQuery.cssHooks上的，如下:
jQuery.each(["height", "width"], function( i, name ) { jQuery.cssHooks[ name ] = { //掛載到jQuery.cssHooks上的 get: function( elem, computed, extra ) { var val; if ( computed ) { if ( elem.offsetWidth !== 0 ) { //如果元素可見 return getWH( elem, name, extra ); //則呼叫函式getWH(elem,name,extra獲取高度、寬度) } else { jQuery.swap( elem, cssShow, function() { val = getWH( elem, name, extra ); }); } return val; } }, set: function( elem, value ) { if ( rnumpx.test( value ) ) { // ignore negative width and height values #1599 value =https://www.cnblogs.com/greatdesert/p/ parseFloat( value ); if ( value >= 0 ) { return value + "px"; } } else { return value; } } }; });
當我們呼叫jQuery.css獲取一個元素的寬度或高度時(例如呼叫$.css(div,'width')時，)就會有限呼叫這個jqueyr.cssHooks里的資訊，jquery.css里對于csshooks的實作如下:
jQuery.extend({ css: function( elem, name, extra ) { var ret, hooks; // Make sure that we're working with the right name name = jQuery.camelCase( name ); hooks = jQuery.cssHooks[ name ]; //hooks指向駝峰式樣式名對應的修正物件， name = jQuery.cssProps[ name ] || name; // cssFloat needs a special treatment if ( name === "cssFloat" ) { name = "float"; } // If a hook was provided get the computed value from there if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) { //優先呼叫hooks物件的里的get()修正方法，這里就是上面定義的對于width、height屬性的get方法了 return ret; // Otherwise, if a way to get the computed value exists, use that } else if ( curCSS ) { return curCSS( elem, name ); } }, //... })
了解了getWH()工具函式和通過jQuery.css()會執行getWH函式后，再來看下heihgt、width、innerHeight、innerWidth、outerHeight、outerWidth這六個API的實作，原始碼如下:
jQuery.each([ "Height", "Width" ], function( i, name ) { //遍歷[ "Height", "Width" ] var type = name.toLowerCase(); // innerHeight and innerWidth jQuery.fn[ "inner" + name ] = function() { //在jQuery實體上添加innerHeight()、innerWidth方法 var elem = this[0]; //獲取第一個匹配元素 return elem ? elem.style ? parseFloat( jQuery.css( elem, type, "padding" ) ) : //如果匹配元素有style屬性，則呼叫方法jQuery.css()獲取高度、寬度，第三個引數為padding， this[ type ]() : null; }; // outerHeight and outerWidth jQuery.fn[ "outer" + name ] = function( margin ) { //在jQuery實體上添加定義outerHeight()、outerWidth()方法， var elem = this[0]; //獲取第一個匹配元素 return elem ? elem.style ? parseFloat( jQuery.css( elem, type, margin ? "margin" : "border" ) ) : //如果匹配元素有style屬性，則呼叫方法jQuery.css()方法，如果傳入了margin，則把margin也算進去 this[ type ]() : null; }; jQuery.fn[ type ] = function( size ) { //在jQuery實體上添加height(size)、width(size)方法 // Get window width or height var elem = this[0]; //獲取第一個匹配元素 if ( !elem ) { return size == null ? null : this; } if ( jQuery.isFunction( size ) ) { //如果size引數是函式，則遍歷匹配元素集合，在每個集合上執行該函式，并取其回傳值迭代呼叫方法.height(size)、.width(size)， return this.each(function( i ) { var self = jQuery( this ); self[ type ]( size.call( this, i, self[ type ]() ) ); }); } if ( jQuery.isWindow( elem ) ) { //如果elem是window物件,則分拿回html或body元素的可見高度clientHeight、可見寬度clientWidth， // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode // 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat var docElemProp = elem.document.documentElement[ "client" + name ], body = elem.document.body; return elem.document.compatMode === "CSS1Compat" && docElemProp || body && body[ "client" + name ] || docElemProp; // Get document width or height } else if ( elem.nodeType === 9 ) { //如果匹配的是documet物件，則讀取html元素的clientHeight/Width // Either scroll[Width/Height] or offset[Width/Height], whichever is greater return Math.max( elem.documentElement["client" + name], elem.body["scroll" + name], elem.documentElement["scroll" + name], elem.body["offset" + name], elem.documentElement["offset" + name] ); // Get or set width or height on the element } else if ( size === undefined ) { //如果未傳入size引數 var orig = jQuery.css( elem, type ), //呼叫jQuery.css()讀取第一個匹配元素計算后的高度、寬度， ret = parseFloat( orig ); return jQuery.isNumeric( ret ) ? ret : orig; //回傳結果 // Set the width or height on the element (default to pixels if value is unitless) } else { return this.css( type, typeof size === "string" ? size : size + "px" ); //否則呼叫this.css()設定樣式 } }; });
遍歷[ "Height", "Width" ]陣列，依次在jQuery.fn上掛載屬性，內部是通過jQuery.css()獲取width或height，也就是上面所說的工具函式，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/25004.html
標籤：jQuery