element元素 取属性_element元素属性_三大系列总结

标签：

1. offset偏移量

1.1. offsetParent

是一个只读属性，获取的最近的定位的父元素。

1)如果child有定位的父元素，offsetParent就是定位的父元素；

2)如果没有定位的父元素，offsetParent就是body

1.2. offsetLeft和offsetTop

相对于定位的父级offsetParent内边距的距离，如果没有定位父元素，则以body为准。(即child的border边界距离offsetParent padding边界的距离，不包括child的margin部分)

1.2.1. 与style.left的区别：

1)、style.left只能获取行内样式

2)、offsetLeft只读，style.left可读可写

3)、offsetLeft是数值，style.left是字符串并且有单位px

4)、如果没有加定位，style.left获取的数值可能是无效的

5)、最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准

1.3. offsetWidth和offsetHeight用来得到对象的大小

可以获得元素在内嵌样式里的宽度和高度

offsetWidth的组成： width+padding+border

1.3.1. 与style.width的区别

1)demo.style.witdh只能获取到行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取

2)style.width是字符串(而且带单位)，offsetWidth是数字

3)demo.style.width可以设置行内样式，offsetWidth是只读属性

2. scroll 滚动大小

2.1. scrollHeight 和scrollWidth滚动内容的大小

element.scrollHeight属性是只读的，它包括：

滚动内容的高度(撑开之后内容的大小) height + padding  不包括边框

1

2 *{3 margin: 0;4 padding: 0;5 }6 #box {7 width: 100px;8 height: 100px;9

10 border: 5px solid red;11 padding: 20px;12 }13

14

15

16

17 //height + padding 获取撑开之后内容的大小

18 console.log(box.scrollHeight);19

20 //border + width + padding 盒子的大小

21 console.log(box.offsetHeight);

2.2. scrollTop和scrollLeft

scrollTop 获取滚动出去的距离

onscroll  滚动事件

2.2.1.  获取页面滚动出去的距离以及兼容处理

scrollTop、scrollLeft在获取页面滚动时有兼容问题

标准浏览器下：  document.body.scrollTop

Ie8下：        document.documentElement.scrollTop

window.pageYOffset：是DOM中标准的属性，但是IE的老版本不支持

2.2.2. 封装兼容浏览器函数function scroll()：

3. client 客户区大小

3.1. clientHeight和clientWidth

element.clientHeight表示元素可视区域的高度，包括可视区域中元素的

CSS height+padding

不包括边框、滚动条、不可见部分、margin。

clientWidth类似，只不过是水平方向。

3.2. clientLeft和clientTop

3.3. 获取浏览器可视区大小(兼容处理)

标签：