【面向JS--元素定位】

1、offset系列方法

offset

offset示意图

offsetHeight示意图

2、scroll系列方法

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
}

更多BOM详情看这里

【面向JS--元素定位】

猜你喜欢