我要评论样式操作模块可用于管理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 = 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，也就是上面所说的工具函数。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论