通过JS获取元素style

848 阅读1分钟

1. window.pageXOffset和window.pageYOffset

window.pageXOffset代替window.scrollX获取页面X轴方向滚动位移,window.pageYOffset代替window.scrollY获取页面Y轴方向滚动位移,其优点在于可以兼容IE(>=9)。

2. Element.scrollHeight和 Element.clientHeight和Element.offsetHeight

Element.scrollHeight是元素内容的高度,包括 padding::before::after元素,不包括bordermargin

Element.clientHeight表示元素的视口高度,包括padding,不包括bordermargin和水平滚动条。

Element.offsetHeight返回该元素的像素高度,高度包含该元素的paddingborder,且是一个整数。

3. Element.offsetLeft Element.offsetTop

offsetLeft表示元素左边到父级元素的距离,offsetTop表示元素上边到父级元素的距离。

4. Element.getBoundingClientRect()

返回一个RectDOM,包含height、width、left、right、top、bottom、x、y,都是表视口的。

4. window.getComputedStyle(element)

获取某一元素的样式,如果要获取具体某一样式,可以如:getComputedStyle(demo).height

总结

getClientHeight兼容性较好,建议优先使用,同时返回值包含小数;

表视口的都不包含border