1、offset系列方法
offset示意图
2、scroll系列方法
scroll示意图
3、client系列
clientX和clientY 获取鼠标在可视区域的位置
clientWidth = width + padding 元素可见区域宽
clientHeight = height + padding 元素可见区域高
clientLeft,clientTop 边框的宽度,若有滚动条的话,包括滚动条
client示意图
4、height 和 width
height 和 width 是获取元素的样式中的高度和宽度,在javascript中它是属于对象的style对象属性中的一个成员,它的值是一个字符类型的(50px等),而另外三个高度的值是int类型的,它们是对象的属性。
document.body.height 就会提示undenifine,
必须写成:document.body.style.height
获得计算后样式的方法
w3c标准 window.getComputedStyle(element, "伪类")[属性]
IE浏览器 element.currentStyle[属性]
封装浏览器兼容性函数
//封装
function getStyle(element, attr) {
if(window.getComputedStyle) {
return window.getComputedStyle(element, null)[attr];
} else {
return element.currentStyle[attr];
}
}
doc.getBoundingClientRect() 获取文档上下左右距离页面左上角的距离及本身宽高
var ClientRect = document.getElementById("box").getBoundingClientRect();
console.log(ClientRect )
ClientRect {
bottom: 515
height: 327
left: 22
right: 670
top: 188
width: 648
}