获取元素偏移
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;