scrollTop、offsetHeight和offsetTop等属性用法详解
来源:互联网 发布:网络运维方案 编辑:程序博客网 时间:2024/06/04 18:52
标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法。
先来看一张比较经典的示意图:
下面结合各上图介绍一下各个属性的作用:
一.offsetTop属性:
此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。
返回值是一个整数,单位是像素。
此属性是只读的。
二.offsetLeft属性:
此属性和offsetTop的原理是一样的,只不过方位不同,这里就不多介绍了。
三.offsetWidth属性:
此属性可以获取元素的宽度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
四.offsetHeight属性:
此属性可以获取元素的高度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
五.clientWidth属性:
此属性可以返回一个元素的宽度值,值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
六.clientHeight属性:
此属性可以返回一个元素的高度值,值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。
返回值是一个整数,单位是像素。
此属性是只读的。
七.scrollLeft属性:
此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离,也就是元素被滚动条向左拉动的距离。
返回值是一个整数,单位是像素。
此属性是可读写的。
八.scrollTop属性:
此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。
返回值是一个整数,单位是像素。
此属性是可读写的。
九.scrollHeight属性:
此属性获取对象的实际尺寸。
- scrollTop、offsetHeight和offsetTop等属性用法详解
- scrollTop、offsetTop、offsetHeight等相对位置介绍
- 终于清晰啦!offsetHeight、scrollHeight、clientHeight和offsetTop、scrollTop、clientTop
- clientHeight/scrollHeight/offsetHeight/offsetParent/offsetTop/offsetHeight/scrollTop
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeigh
- offsetTop,offsetHeight,scrollHeight,scrollTop的区别
- offsetTop,offsetHeight,scrollHeight,scrollTop,这些属性曾经困扰了我很长很长很长时间
- 边框scrollTop offsetTop 详解
- JS种offsetTop、scrollTop、clientTop等各个属性的介绍
- offsetTop、clientTop、scrollTop、offsetTop属性介绍
- top scrollTop offsetTop等对比
- offsetTop.offsetLeft,offsetWidth,offsetHeight,offsetParent,scrollTop,scrollLeft,scrollWidth,scrollHeight区别
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- offsetLeft,offsetTop,offsetHeight,offsetWidth,scrollTop,scrollLeft,scrollHeight,scrollWidth
- offsetWidth、offsetHeight、offsetLeft、offsetTop以及scrollTop,scrollLeft的个人理解
- offsetTop和scrollTop的区别
- Swift模拟从服务区端加载指定的控制器类型
- JS获取URL传递过来的参数值
- liunx设置自启动之chkconfig命令详解
- 进程调度
- 大型网站的技术架构演进过程
- scrollTop、offsetHeight和offsetTop等属性用法详解
- NetUtils网络连接工具类
- android4.4 SystemUI的分析及滑动navigation的显示和隐藏
- 位运算符——左移(<<)、右移(>>)、与(&)、非(~)、或(|)、异或(^)
- plsql安装--无需安装oracle客户端
- popuwindow弹出时,背景半透明
- HTML学习
- Nginx配置实战
- Linux 设备驱动--- 内核等待队列