js的人一定会接触到client家族、scroll家族和offset家族。由于width和Height属性是类似的,所以这里我只挑这三个height来讲一下。
clientHeight、offsetHeight、clientTop、innerWidth、outerWidth、scrollHeight、offsetTop、scrollTop,scrollY
1.clientHeight / clientWidth:
clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度,对于inline的元素这个属性一直是0,单位px,只读元素。:
clientHeight = (content height) + (padding top+padding bottom);
翻译成中文就是 clientHeight = 内容实际高度 + 上下内边距。
简单的来说:在网页的盒子模型中,一个元素由内到外分别由 height + padding + border + margin组成,而clientHeight只取前面的height和padding。不管内容可不可见,即使你用定位把元素移出屏幕外,clientHeight获取到的值仍然不变。
此属性会将获取的值四舍五入取整数。 如果你需要小数结果, 请使用 element.getBoundingClientRect()
2.offsetHeight / offsetHeight:
offsetWidth和offsetHeight表示的是元素的可见宽度和高度,与元素有没有设置宽高没有直接关系。
包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
offsetHeight = height + padding + border.
即在clientHeight的基础上加上了上下border的高度。
同样的offsetHeight获取到的高度是网页实际渲染出来的高度+内边距+边框。和元素本身是否可见无关。
注:clientHeight和offsetHeight的注意点
当元素设置为display:none;之后,clientHeight和offsetHeight的高度均变为0,因为浏览器不会对display:none的元素进行渲染,所以使用时一定要注意这一点.
当父元素没有明确高度时,clientHeight和offsetHeight计算高度时,