jQuery从入门到精通源码分析系列(二十九) 元素操作 – 元素大小
沉沙 2018-07-24 来源 : 阅读 1007 评论 0

摘要:本篇jQuery教程探讨了跟HTML相关处理的10种方法与jQuery中相对应的处理流,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

HTML息息相关的的样式

偏移量

offsetWidth offsetHeight offsetLeft offsetTop

offsetHeight/offsetWidth: 表述元素的外尺寸:元素内容+内边距+边框(不包括外边距)

offsetLeft/offsetTop: 表示该元素的左上角(边框外边缘)与已定位的父容器(offsetParent对象)左上角的距离。

offsetParent元素是指元素最近的定位(relative,absolute)祖先元素,可递归上溯。

客户区大小

clientWidth clientHeight 

clientWidth/clientHeight: 用于描述元素的内尺寸:元素内容+两边内边距

滚动大小

scrollWidth scrollHeight scrollLeft scrollTop

scrollHeight/scrollWidth: 元素内容的总高度或宽度

scrollLeft/scrollTop:是指元素滚动条位置,它们是可写的(被隐藏的内容区域左侧/上方的像素)

浏览器窗口的滚动条位置:window对象的pageXoffset和pageYoffset, IE 8及更早版本可以通过scrollLeft和scrollTop属性获得滚动条位置

以下是网上的总结,我收集下

Chrome/FF/Safari/opera 
对这些浏览器而言,window有个属性innerWidth/innerHeight包含的是整个文档的可视区域尺寸,注意,这个尺寸是包含滚动条大小的。 
如果我们不计滚动条的影响,就可以直接使用这两个属性。 
如果滚动条会影响(比如最大化弹出框),那么应该想另外的办法。

document.documentElementy与document.body

Document对象是每个DOM树的根,但是它并不代表树中的一个HTML元素,document.documentElement属性引用了作为文档根元素的html标记,document.body属性引用了body标记 
我们这里获取常见的三个值(scrollWidth、offsetWidth和clientwidth)来比较一下

document.documentElement.scrollWidth返回整个文档的宽度

document.documentElement.offsetWidth返回整个文档的可见宽度

document.documentElement.clientwidth返回整个文档的可见宽度(不包含边框),clientwidth = offsetWidth - borderWidth

不过一般来说,我们不会给document.documentElement来设置边框,所以这里的clientwidth 与 offsetWidth一致

document.body.scrollWidth返回body的宽度 
注意,这里的scrollWidth有个不一致的地方,基于webkit的浏览器(chrome和safari)返回的是整个文档的宽度,也就是和document.documentElement.scrollWidth一致, 
opera和FF返回的就是标准的body 的scrollWidth,个人觉得opera和FF算是比较合理的。


document.body.offsetWidth返回body的offsetWidth 
document.body.clientwidth返回body的clientwidth(不包含边框),clientwidth = offsetWidth - borderWidth

我们看上面的例子,会发现

body和documentElement的有些值是相等的,这并不是表示他们是等同的。而是因为当我们没有给body设置宽度的时候,document.body默认占满整个窗口宽度,

于是就有:

document.body.scrollWidth = document.documentElement.scrollWidth

document.body.offsetWidth = document.documentElement.offsetWidth

document.body.clientwidth = document.documentElement.clientwidth - document.body.borderWidth(body的边框宽度)


当我们给body设置了一个宽度的时候,区别就出来了。

IE9/IE8 
这两个差不多,唯一的区别是IE9包含window.innerWidth属性,而IE8不包含window.innerWidth属性。 
document.documentElement.scrollWidth返回整个文档的宽度,和FF等浏览器一致 
document.documentElement.offsetWidth返回整个文档的可见宽度(包含滚动条,值和innerWidth一致),注意,这里和FF等浏览器又有点区别。 
document.documentElement.clientwidth返回整个文档的可见宽度(不包含边框),和FF等浏览器一致。clientwidth = offsetWidth - 滚动条宽度

document.body.scrollWidth返回body的宽度,注意,这里的scrollWidth和FF等浏览器有点区别,这里并不包括body本身的border宽度。 
因此例子中,相比FF少了10px。 
document.body.offsetWidth返回body的offsetWidth,和FF等浏览器一致 
document.body.clientwidth返回body的clientwidth(不包含边框),和FF等浏览器一致,clientwidth = offsetWidth – borderWidth

IE7与IE9/IE8的主要区别是 
第一、document.documentElement.offsetWidth的返回值不一样, 
参见上面说的,IE9/IE8的document.documentElement.offsetWidth包含滚动条,但是,IE7的document.documentElement.offsetWidth不包含滚动条。 
第二、document.documentElement.scrollWidth返回整个文档的宽度,注意,这里和IE9/IE8、FF等浏览器又有不一致,对于IE9/IE8、FF等浏览器,scrollWidth最小不会小于窗口的宽度,但是在IE下没有这个限制,文档有多小,这个就有多小 
其他倒是挺一致的。

IE6了 
IE6的document.documentElement返回值与IE9/IE8没有区别(由此可见,对于document.documentElement,IE7就是个奇葩)。 
话说回来,IE的document.body就是个奇葩,当没有给body设置宽度的时候,body是默认占满整个文档的(注意,其他的浏览器都是占满整个窗口),当然,最小值是整个窗口的大小,就是说body指向了根元素。 
因此,在算上IE6在解析width方面的bug,和其他的浏览器的区别就淋漓尽致了。 
document.body.scrollWidth返回body的宽度,和IE9/IE8/IE7一致 
document.body.offsetWidth返回body的offsetWidth,注意,由于body的不同,这里的offsetWidth = scrollWidth + borderWidth 
document.body.clientwidth返回body的clientwidth(不包含边框)clientwidth = offsetWidth - borderWidth 
另外,有一点和IE7同样,就是document.documentElement.scrollWidth没有最小宽度限制。

源码解析

先看jQuery对窗口大小六种相似方法的生成

jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {

        jQuery.each( { padding: "inner" + name, content: type, "": "outer" + name }, function( defaultExtra, funcName ) {

//执行代码

        });

    });

扩展方法还是用的合并的模式,把具有相同特性的方法采用合并处理

循环生成是艺术,需要深刻了解它们的功能与共同点,然后将特异点组成一个对象,好处自然是省代码了,然后可以集中处理

执行代码

例如:.width()

为匹配的元素集合中获取第一个元素的当前计算宽度值。

return jQuery.access( this, function( elem, type, value ) {

    var doc;

    if ( jQuery.isWindow( elem ) ) {

        return elem.document.documentElement[ "client" + name ];

    }

    // Get document width or height

    if ( elem.nodeType === 9 ) {

        doc = elem.documentElement;

        return Math.max(

            elem.body[ "scroll" + name ], doc[ "scroll" + name ],

            elem.body[ "offset" + name ], doc[ "offset" + name ],

            doc[ "client" + name ]

        );

    }

    return value === undefined ?

        jQuery.css( elem, type, extra ) :

        jQuery.style( elem, type, value, extra );

}, type, chainable ? margin : undefined, chainable, null );

A.首先先解释下普通元素和非普通元素,

非普通元素是指window,document这些 元素对象,

普通元素是指除window,document之外的元素,如:div

B.css(width) 和 .width()之间的区别?

对于非普通元素,只能使用 .width()

对于普通的元素 ,他们的作用相同后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法C.非普通元素的获取

如:window

$(window).width();   //浏览器窗口

即返回HTML的窗口,所以代码就是document.documentElement[“clientWidth”]

· 

if ( jQuery.isWindow( elem ) ) {

        return elem.document.documentElement[ "client" + name ];

    }

document

$(document).width();   //HTML文档窗口

取最大值,因为可以带卷滚条溢出


if ( elem.nodeType === 9 ) {

    doc = elem.documentElement;

    // Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height],

    // whichever is greatest

    return Math.max(

        elem.body[ "scroll" + name ], doc[ "scroll" + name ],

        elem.body[ "offset" + name ], doc[ "offset" + name ],

        doc[ "client" + name ]

    );

}


D.普通元素取值

jQuery.cssHooks

因为有些样式不是简单的读写属性就可以的,比如width就不是简单地读取el.style.width。为了解决这个问题,jquery定义了一个属性 $.cssHooks,这里可以自定义对某个属性的get和set操作。而且jquery中就是用cssHooks来处理某些特殊属性的

对CSS的操作都是通过统一的API调用,操作的属性是

· 

1. borderWidth: Object

2. height: Object

3. margin: Object

4. opacity: Object

5. padding: Object

6. width: Object

此时就会用jQuery.cssHooks方法处理兼容问题,

width,height的钩子方法

jQuery.each([ "height", "width" ], function( i, name ) {

        jQuery.cssHooks[ name ] = {

            get: function( elem, computed, extra ) {

                if ( computed ) {

                    return elem.offsetWidth === 0 && rdisplayswap.test( jQuery.css( elem, "display" ) ) ?

                        jQuery.swap( elem, cssShow, function() {

                            return getWidthOrHeight( elem, name, extra );

                        }) :

                        getWidthOrHeight( elem, name, extra );

                }

            },

            set: function( elem, value, extra ) {

                var styles = extra && getStyles( elem );

                return setPositiveNumber( elem, value, extra ?

                    augmentWidthOrHeight(

                        elem,

                        name,

                        extra,

                        jQuery.support.boxSizing && jQuery.css( elem, "boxSizing", false, styles ) === "border-box",

                        styles

                    ) : 0

                );

            }

        };

get 方法:

1 节点隐藏等情况下,height、width等获取值不准,此时需利用jQuery.swap方法来获得准确值

2 getWidthOrHeight获取准确值

本章大体回顾下了跟HTML相关处理的10种方法与jQuery中相对应的处理流,下章再具体分析jQuery中对应每种不同兼容的处理


本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程