【面向JS–元素定位】

WEB前端 waitig 541℃ 百度已收录 0评论

1、offset系列方法

offset

offset示意图

offsetHeight示意图

2、scroll系列方法

scroll

scroll示意图

scroll示意图

3、client系列

clientX和clientY     获取鼠标在可视区域的位置     
clientX = width + padding
clientY = height + padding
clientLeft     边框的宽度,若有滚动条的话,包括滚动条

client示意图

client示意图

4、height 和 width

height 和 width 是获取元素的样式中的高度和宽度,在javascript中它是属于对象的style对象属性中的一个成员,它的值是一个字符类型的(50px等),而另外三个高度的值是int类型的,它们是对象的属性。

document.body.height 就会提示undenifine,
必须写成:document.body.style.height

获得计算后样式的方法

w3c标准   window.get ComputedStyle(element, null)[属性]
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看这里


本文由【waitig】发表在等英博客
本文固定链接:【面向JS–元素定位】
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)