offset系列、client系列、scroll系列的属性

1. offset系列属性

1.1 offsetTop属性:

此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。

返回值是一个整数,单位是像素。

1.2 offsetLeft属性:

此属性和offsetTop的原理是一样的,只不过方位不同

1.3 offsetParent属性

此属性可以返回距离当前元素最近的采用定位(position属性值为fixed、relative或者absolute)祖先元素。

如果祖先元素中没有采用定位的元素,则返回body对象。

特别说明:

(1).在IE7浏览器中,offsetParent将会返回第一级父元素对象的引用。

(2).如果定位的父级元素的display属性值为none,则此属性返回值为null。

特别注意:在IE7浏览器中,offsetParent的返回值是距离它最近的父元素,所以在IE7浏览器中返回0。

1.4 offsetWidth属性:

此属性可以获取元素的宽度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

1.5 offsetHeight属性:

此属性可以获取元素的高度,高度值包括:元素内容+内边距+边框;不包括外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

2.client系列属性

2.1 clientWidth属性:

此属性可以返回一个元素的宽度值,值是:元素的内容+内边距;不包括边框、外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

2.2 clientHeight属性:

此属性可以返回一个元素的高度值,值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

3. scroll系列属性:

3.1 scrollLeft属性:

此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离,也就是元素被滚动条向左拉动的距离。

返回值是一个整数,单位是像素。

此属性是可读写的。

3.2 scrollTop属性: 

此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。

返回值是一个整数,单位是像素。

此属性是可读写的。

3.3 scrollHeight属性:

scrollHeight和scrollWidth返回值分别是元素的实际高度和实际宽度,不包括滚动条所占用的空间。获取内容的宽度或者自身宽度中的较大者;  当没有滚动条的时候,scrollWidth是内容+padding;有滚动条的时候,scrollWidth是内容+padding-滚动条的宽度

scrollHeight客户区高度值是height属性值和padding属性值之和,不包括水平滚动条、border和margin。

是一个只读属性,不能够对其赋值。scrollWidth类似,客户区宽度值是width属性值和padding属性值之和,不包括水平滚动条、border和margin。

是一个只读属性,不能够对其赋值。

---------------------

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,859评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,119评论 0 0
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,518评论 1 3
  • 个人博客:https://yeaseonzhang.github.io 花了半个多月的时间,终于又把“JS红宝书”...
    Yeaseon阅读 11,617评论 9 52