盒子模型
盒子模型包括margin、border、padding、content
js盒子模型的方法可分为:尺寸类、距离类、其它类
client系列、offset系列、scroll系列、getBoundingClientRect() 返回值都是不带单位的数字。
尺寸类:
元素的尺寸,返回值不带单位的:
clientHeight / clientWidth 支持(会计算)padding,不支持border
offsetHeight / offsetWidht 支持padding,支持border 在没有设置固定宽高的时候,走被内容撑开的高度。
scrollHeight / scrollWidht 支持padding,不支持border 但支持被内容撑开的高度。
clientTop / clientLeft 上边框 / 左边框
元素的尺寸,返回值带单位的:
style.height / width 获取行间的样式。
getComputedStyle(obj).height / width 得到元素对象计算后的样式,只能获取,不支持padding
obj.currentStyle.height / width 也是得到计算后的样式,(同上)。用于IE低版本。
可视区的尺寸,返回值不带单位的:
document.documentElement.clientWidth / document.documentElement.clientHeight (会计算滚动条的宽度)
window.innerHeight / window.innerWidth (不计算滚动条的宽度)
距离类:
offsetTop / offsetLeft 从子元素的上 / 左外边框到定位父级的上 / 左内边框的距离(如果没有定位父级,默认走body)
定位父级:offsetParent (let box = box1.offsetParent,可读,可写)
ev.clientX / ev.clientY 鼠标到可视区(基于可视区)的 x、y 值
ev.pageX / ev.pageY 鼠标到可视区(基于页面)的 x、y 值
绝对位置的计算:ele.getBoundingClientRect().top / left / right / bottom
ele.getBoundingClientRect().left 得到当前元素左外边框到body的左边的距离,也可以用下面的例子实现:
let obj = box3; let l = 0; let box3L = box3.clientLeft; while (obj) { l += obj.offsetLeft + obj.clientLeft; obj = obj.offsetParent;//让这次的box,变成上一次的定位父级,再次循环是就能拿到下一段距离。 console.log(obj); } l -= box3L; console.log(l);
滚动距离:
window.pageXOffset / window.pageYOffset 只能读不能写
document.documentElement.scrollTop 能读也能写
document.body.scrollTop ( IE)
window.scrollTo(x,y) 专门用来写滚动条的距离的
例子:ele.scrollTo(0,100) 有滚动条的时候使用,让元素滚动到指定的位置,单位px
document.onclick = function(){ //window.pageYOffset = 100;//点击没有效果, //document.documentElement.scrollTop = 100;//有效果 window.scrollTo(0,100);//有效果 }