关于原生js的位置操作以及尺寸操作

来源:互联网 发布:淘宝卖家信用贷款 编辑:程序博客网 时间:2024/05/22 14:28

原生js的位置以及尺寸操作 —— offset系列

1.  demo.style.height/width 获取行内样式,如果没有写行内样式的话,则获取到的值为空。如果获取到的存在值,值为带单位的eg:100px2.  offsetWidth/offsetHeight 用来获取对象的大小(只读属性)构成: offsetHeight = height + padding + border

这里写图片描述

3.  offsetParent 返回该对象距离最近的带有定位的父级,如果当前元素所在的父级都没有设置,那么offsetParent指的就是 body.4.  offsetLeft 和offsetTop 用来得到对象距离自身最近的(带有定位的)父元素的位置。offsetLeft代表的是自身border左侧到父级padding左侧的距离。备注: offsetLeft以border左上角为基准,style.leftmargin左上角为基准。

这里写图片描述

原生js的位置以及尺寸操作 —— scroll系列

1.  scrollHeight和scrollWidth 获取对象实际内容的高度/宽

这里写图片描述

2.  scrollTop/scrollLeft  被卷去部分的顶部/左侧到可视区域 顶部/左侧的距离。单独给某块demo设置滚动条的话,要获取就是demo.onscroll = function(){console.log(demo.scrollTop)};

原生js的位置以及尺寸操作 —— client系列

1.  clientWidth和clientHeight可视clientWidth: width  +  padding  不包含border2.  clientTop/clientLeftclientTop和clientLeft没什么用   他们就是borderTop和borderLeft(如果有滚动条会包含滚动条的宽度)

这里写图片描述

欢迎大家关注我的微信公众帐号
这里写图片描述

2 0
原创粉丝点击