获取元素偏移以及元素尺寸,浏览器窗口尺寸

102 阅读1分钟

获取元素偏移

1.1 获取元素相对父级 语法:节点.offsetParent console.log(box2.offsetParent)

1.2 获取元素的偏移量 语法:节点.offsetLeft

console.log('box2.offsetLeft', box2.offsetLeft)
console.log('box2.offsetTop', box2.offsetTop)

获取元素尺寸

2.1 实际宽度+padding+border offsetXXX console.log('oDiv.offsetWidth', oDiv.offsetWidth); console.log('oDiv.offsetHeight', oDiv.offsetHeight); 2.2 实际宽度+padding clientXXX console.log('oDiv.clientWidth', oDiv.clientWidth); console.log('oDiv.clientHeight', oDiv.clientHeight);

2.3 边框线border的宽度 clientXXX console.log('oDiv.clientTop',oDiv.clientTop); console.log('oDiv.clientLeft',oDiv.clientLeft); 上左边框线的宽度

获取浏览器窗口尺寸

3.1 window.innerXXX (计算时会包含浏览器的滚动条) console.log('window.innerWidth', window.innerWidth); console.log('window.innerHeight',window.innerHeight); 3.2 document.documentElement.clientXX (计算时只计算可视区域,不包含滚动条)

 console.log('document.documentElement.clientWidth', document.documentElement.clientWidth)
 console.log('document.documentElement.clientWidth', document.documentElement.clientHeight)

3.3 获取浏览器滚动距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;