大家好,又见面了,我是你们的朋友全栈君。
学习原生js的人一定会接触到client家族、scroll家族和offset家族。其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度,而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度,由于width和Height属性是类似的,所以这里我只挑这三个height来讲一下。
clientHeight很多文章把它翻译成网页的可见高度,实际上是不太准确的,首先,从单词本身来说,client并没有可见的意思,(client 顾客,客户,委托人)。其次,clientHeight获取到的高度其实和内容可不可见没有一点关系。下面给出我的结论: clientHeight = (content height) + (padding top+padding bottom); 翻译成中文就是 clientHeight = 内容实际高度 + 上下内边距。 而内容实际高度可以用window.getComputeStyle(obj).height或者$(obj).css(“height”)获取。
简单的来说:在网页的盒子模型中,一个元素由内到外分别由 height + padding + border + margin组成,而clientHeight只取前面的height和padding。不管内容可不可见,即使你用定位把元素移出屏幕外,clientHeight获取到的值仍然不变。
单词offset意为补偿,抵消,而offsetHeight也很简单,关于offsetHeight网上并没有太多争议,这里直接给出我的结论 offsetHeight = height + padding + border. 即在clientHeight的基础上加上了上下border的高度。 同样的offsetHeight获取到的高度是网页实际渲染出来的高度+内边距+边框。和元素本身是否可见无关。
scrollHeight有的人翻译成可滚动内容的高度,这个翻译还是比较准确的,但是网上大部分人都没有讲清楚scrollHeight到底是什么。这里我给出我的结论。
可以看到,在用scrollHeight获取可滚动内容的高度时有这么一个坑,那就是当你不希望定位的后代元素被计算入滚动总高度的时候,使用scrollHeight将导致出现比较大的错误。 这个问题我也是这两天封装一个滚动条组件的时候才遇到的。本来想着用盒子的scrollHeight去获取内容的高度,但是却导致了滚动条的抖动问题,原因是我让定位的后代元素随着滚动高度而改变位置和高度,导致scrollHeight获取到值发生改变,频繁地触发滚动条的刷新,导致抖动。解决办法: 1.如果是自己封装的滚动条组件,则不要使用scrollHeight获取内容高度,改用非定位子元素的offsetHeight累加来计算得出内容高度; 2.如果是采用默认的浏览器滚动条如overflow : auto;则想办法让不希望计入滚动高度的元素分离出来,例如用position:fixed代替positon:absolute;或者把它移除结构外。
设要获取的元素为obj,另外此处的获取方法只针对box-sizing:content-box;对于box-sizing:border-box;暂时没有测试。有兴趣的小伙伴可以自己去试一下。 1.只想获取内容实际高度的(只有height ,不包括padding、border、margin) 原生js: window.getComputeStyle(obj).height———– jQuery: (obj).css(“height”)或(obj).height(); 2.只想获取height+padding. 原生js: obj.clientHeight———- jQuery: (obj).innerHeight(); 3.只想获取height+padding+border 原生js: obj.offsetHeight————— jQuery: (obj).outerHeight(); 4.想获取height+padding +border +margin 原生js: 暂无————-jQuery:
好了,今天我就写这么多吧,这是我的第一篇博客,作者郑伟斌,写于2019/4/9,转载请注明出处,谢谢大家。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/163730.html原文链接:https://javaforall.cn