详细了解clientWidth、clientHeight、clientLeft、clientTop和几个常用的场景
时间：2023-04-02 19:40:02
HTML
clientLeft、clientHeight、clientWidth、clientHeightclientWidth、clientHeight元素内部宽高，clientLeft、clientTop获取元素内边距边框距离到边界。大概如下图所示：clientWidth属性表示元素的内部宽度，以像素为单位。此属性包括填充，但不包括垂直滚动条（如果有）、边框和边距。如上图，计算方式分为以下两种：有垂直滚动条内容宽度+padding-scollbarWidth没有滚动条内容宽度+paddingclientHeight属性表示元素内部高度（单位像素），包括内边距，但不包括水平滚动条、边框和边距。如上图所示，计算方法如下：有水平滚动条内容高度+padding-scollbarWidth没有滚动条内容高度+paddingclientLeft表示元素左边框的宽度。计算方法如下：如果文字方向从右到左排列（默认从左到右，通过设置direction:rtl;），如果有垂直滚动条，borderwidth+scollbarwidth默认为borderwidth注意：如果当前元素是行内元素（inline），clientLeft将返回0；clientTop指示元素上边框的宽度。介绍完基本情况，我们来看看具体的例子。代码如下：
没有横竖排，文字默认排列。接下来，我将上面的例子修改如下：给element.box添加overflow:scroll使其显示滚动条，然后查看每个值：如下图所示：从输出的响应结果来看，clientWidth和clientHeight都变小了，也就是说不包括它们的滚动条了。改变容器文本的输出方向，看clientLeft值会不会像之前说的那样加上滚动条的宽度？如下图所示：从打印结果来看，如果改变了文字方向（rtl）且有滚动条：clientLeft=scrollbarWidth+borderLeftWidth使用场景计算滚动条宽默认（无滚动条）clientWidth=contentwidth+paddingLeftWidth+paddingRightWidth;对于上面的例子，clientWidth=200+10+10；withscrollbar:clientWidth=(contentwidth+paddingLeftWidth+paddingRightWidth)-scrollbarWidth可以推导出滚动条的计算方法：scrollbarWidth=(内容宽度+paddingLeftWidth+paddingRightWidth)-clientWidth;clientWidth是已知的，只要从上面的公式中知道内容区域的大小和左右padding值即可varele=document.querySelector("#box");varcomputedStyle=window.getComputedStyle(ele);varoffsetWidth=ele.offsetWidth;//内容宽度+填充宽度+边框宽度（包括滚动条）varceil=function(v){returnMath.ceil(parseFloat(v))}varmaxClientWidth=offsetWidth-ceil(computedStyle.borderLeftWidth)-ceil(computedStyle.borderRightWidth);//ClientWidth的最大值（理想情况下，没有滚动条）varscrollbarWidth=maxClientWidth//Scrollbarsize-ceil(ele.clientWidth);console.log(scrollbarWidth);//17这样就可以计算出滚动条的宽度，同样的方法可以得到高度。因为上面getComputedStyle的使用只兼容IE9+、Chrome、Firefox、Safari等，需要兼容IE8及以下版本，可以做如下兼容处理：//这里，如果是IE8以下，它需要更改为getElementByIdvarselector=function(selectorName){if(!selectorName&&!(typeofselectorName==="string")){return{}};var前缀=/^#/;如果（document.querySelector）{selectorName=prefix.test（selectorName）？选择器名称.substr(1):选择器名称；返回document.querySelector(selectorName);}elseif(document.getElementById){selectorName=prefix.test(selectorName)？选择器名称：“#”+选择器名称；返回document.getElementById(selectorName);}}varselector=selector("box");varcomputedStyle=window.getComputedStyle===undefined?ele.currentStyle:window.getComputedStyle(ele);varoffsetWidth=ele.offsetWidth;//内容宽度+填充宽度+边框宽度（包括滚动条）varceil=function(v){returnMath.ceil(parseFloat(v))}varmaxClientWidth=offsetWidth-ceil(computedStyle.borderLeftWidth)-ceil(computedStyle.borderRightWidth);//ClientWidth的最大值（理想情况下，就是没有滚动条）varscrollbarWidth=maxClientWidth//滚动条大小-ceil（ele.clientWidth）；console.log(scrollbarWidth);//17元素内部的实际可用区域可用区域其实就是可以布置内容的空间，可见区域的宽度其实就是clientWidth-paddingLeftWidth-paddingRightWidth的值。比较scrollingbar的宽度比较简单，只需要知道左右padding的大小即可。varselector=function(selectorName){if(!selectorName&&!(typeofselectorName==="string")){return{}};var前缀=/^#/;如果（document.querySelector）{selectorName=prefix.test（selectorName）？选择器名称.substr(1):选择器名称；返回document.querySelector(selectorName);}elseif(document.getElementById){selectorName=prefix.test(selectorName)？选择器名称：“#”+选择器名称；返回document.getElementById(selectorName);}}varselector=selector("box");varcomputedStyle=window.getComputedStyle===undefined?ele.currentStyle:window.getComputedStyle(ele);varceil=function(v){返回Math.ceil(parseFloat(v))}console.log(ele.clientWidth-ceil(computedStyle.paddingLeft)-ceil(computedStyle.paddingRight));以上计算方法不固定，仅供参考。也可以推荐更好的计算方法。~比如通过getBoundingClientRect()等。如有错误和问题，请指出。谢谢~
