快捷导航
查看: 15432|回复: 6

offsetHeight和offsetTop等属性用法详解

[复制链接]
发表于 2013-7-19 20:34:51 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-7-8 11:33 编辑

offsetHeight和offsetTop等属性用法详解:
关于标题中的两个属性更多内容可以参阅以下两篇文章:
(1).offsetHeight可以参阅JavaScript offsetHeight一章节。
(2).offsetTop可以参阅JavaScript offsetTop一章节。
标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中。
但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度。
下面就介绍一下相关属性的用法。
先来看一张比较经典的示意图:
2010122711201721.gif
下面结合各上图介绍一下各个属性的作用:
一.offsetTop属性:
此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。
返回值是一个整数,单位是像素。
此属性是只读的。
更多内容可以参阅offsetTop属性用法一章节。
二.offsetLeft属性:
此属性和offsetTop的原理是一样的,只不过方位不同,这里就不多介绍了。
更多内容可以参阅offsetleft属性用法详解一章节。
三.offsetWidth属性:
此属性可以获取元素的宽度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
更多内容可以参阅js offsetWidth属性用法详解一章节。
四.offsetHeight属性:
此属性可以获取元素的高度,高度值包括:元素内容+内边距+边框;不包括外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
更多内容可以参阅js offsetHeight属性用法详解一章节。
五.clientWidth属性:
此属性可以返回一个元素的宽度值,值是:元素的内容+内边距;不包括边框、外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
更多内容可以参阅clientWidth属性用法详解一章节。
六.clientHeight属性:
此属性可以返回一个元素的高度值,值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
更多内容可以参阅clientHeight属性用法详解章节。
七.scrollLeft属性:
此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离,也就是元素被滚动条向左拉动的距离。
返回值是一个整数,单位是像素。
此属性是可读写的。
更多内容可以参阅js scrollLeft一章节。
八.scrollTop属性:
此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。
返回值是一个整数,单位是像素。
此属性是可读写的。
九.scrollHeight属性:
关于scrollHeight和scrollWidth用法可以参阅scrollWidth和scrollHeight属性用法详解一章节。

评分

参与人数 1金钱 +10 收起 理由
小屁孩 + 10

查看全部评分

发表于 2016-12-2 13:17:10 | 显示全部楼层
内部的相关文章介绍的很不错
发表于 2016-12-20 10:47:26 | 显示全部楼层
内容还真是挺多的
发表于 2017-2-11 19:10:33 | 显示全部楼层
很棒!!!找到这里才理清了。
发表于 2017-2-11 19:16:02 | 显示全部楼层
明心见性 发表于 2017-2-11 19:10
很棒!!!找到这里才理清了。

现在网站改版对于教程的这种形式能接受吗
http://www.softwhy.com/qiduan/css_source/
发表于 2017-2-11 19:21:29 | 显示全部楼层
admin 发表于 2017-2-11 19:16
现在网站改版对于教程的这种形式能接受吗
http://www.softwhy.com/qiduan/css_source/

我是都能看的,比较在意内容的质量。
发表于 2017-2-11 19:25:25 | 显示全部楼层
明心见性 发表于 2017-2-11 19:21
我是都能看的,比较在意内容的质量。

嗯嗯,如果有什么问题,及时向我们反馈

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-19 07:41 , Processed in 0.088252 second(s), 27 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表