详细了解 clientWidth、clientHeight、clientLeft、clientTop 以及几个常用的场景
clientLeft、clientHeight、clientWidth、clientHeight
clientWidth
、clientHeight
元素内部宽度和高度, clientLeft
、clientTop
获取元素内边距边框到边框的距离.
大概如下图所示:
clientWidth
属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。
如上图所示, 计算方式为, 分为如下两种:
- 存在垂直滚动条
content width + padding - scollbarWidth
- 不存在滚动条
content width + padding
clientHeight
属性表示元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。
如上图所示, 计算方式为如下两种:
- 存在水平滚动条
content height + padding - scollbarWidth
- 不存在滚动条
content height + padding
clientLeft
表示一个元素的左边框的宽度.
计算方式为如下两种情况:
- 如果文字方向从右往左(默认从左往右,通过设置 direction: rtl;)进行排列,且存在垂直滚动条的情况下
border width + scollbar width
- 默认情况下
border width
注意:
如果当前元素是行内元素(inline)时, clientLeft将返回 0;
clientTop
表示一个元素的上边框的宽度.
把基本的情况介绍完了看看具体实例,代码如下:
<style>.box {width: 200px;height: 200px;overflow: hiddle;margin: 10px;padding: 10px;border: 5px solid black;background-color: #ccc;direction: rtl;}
</style>
<div class="box" id="box">
</div><script>var ele = document.querySelector("#box");var clientWidth = ele.clientWidth;var clientHeight = ele.clientHeight;var clientLeft = ele.clientLeft;var clientTop = ele.clientTop;console.log(clientWidth, clientHeight, clientLeft, clientTop);// 220 , 220, 5, 5
</script>
这是不存在水平和垂直,以及文字按照默认情况下排列.
下面我将对上面实例进行如下修改:
- 给元素
.box
添加overflow:scroll
让它显示滚动条, 再来看看每个值:
<style>.box {...overflow: scroll;}</style><script>console.log(clientWidth, clientHeight, clientLeft, clientTop);// 203, 203, 5, 5</script>
如下图所示:
从输出答应结果来看, clientWidth 、clientHeight 变小了,也就是说不包含其滚动条.
- 改变容器文字输出方向,看看 clientLeft 值会不会像之前说的会加上滚动条的width ?
<style>.box {...overflow: scroll;direction: rtl;}</style><script>console.log(clientWidth, clientHeight, clientLeft, clientTop);// 203, 203, 22, 5</script>
如下图所示:
从打印结果来看, 改变文字方向(rtl)并且存在处置滚动条情况下:clientLeft = scrollbarWidth + borderLeftWidth
使用场景
计算滚动条宽度
默认情况下(没有滚动条情况下)
clientWidth = content width + paddingLeftWidth + paddingRightWidth;
对上面示例来说 clientWidth = 200 + 10 + 10;有滚动条情况下:
clientWidth = (content width + paddingLeftWidth + paddingRightWidth) - scrollbarWidth可以推断出滚动条计算方式:
scrollbarWidth = (content width + paddingLeftWidth + paddingRightWidth) - clientWidth;
clientWidth
已知, 从上面公式来看只要知道内容区域大小和左右padding值即可
var ele = document.querySelector("#box");var computedStyle = window.getComputedStyle(ele);var offsetWidth = ele.offsetWidth; // content widht + padding width + border width (包含滚动条)var ceil = function(v){return Math.ceil(parseFloat(v))}var maxClientWidth = offsetWidth- ceil(computedStyle.borderLeftWidth)- ceil(computedStyle.borderRightWidth); // ClientWidth 最大值(理想情况下, 也就是不存在滚动条)var scrollbarWidth = maxClientWidth // 滚动条大小- ceil(ele.clientWidth);console.log(scrollbarWidth); // 17
这样就计算出滚动条的 width
, 高度同理可得.
上面因为使用 getComputedStyle
只能兼容到 IE9+、Chrome、Firefox、Safari 等 , 需要兼容IE8以及以下版本,可以作下兼容处理:
// 这里如果IE8以下则需要改为 getElementByIdvar selector = function (selectorName) {if (!selectorName && !(typeof selectorName === "string")) { return {} };var prefix = /^#/;if (document.querySelector) {selectorName = prefix.test(selectorName) ? selectorName.substr(1) : selectorName;return document.querySelector(selectorName);} else if(document.getElementById) {selectorName = prefix.test(selectorName) ? selectorName : "#" + selectorName;return document.getElementById(selectorName);}}var selector = selector("box"); var computedStyle = window.getComputedStyle === undefined ? ele.currentStyle : window.getComputedStyle(ele);var offsetWidth = ele.offsetWidth; // content widht + padding width + border width (包含滚动条)var ceil = function (v) {return Math.ceil(parseFloat(v))}var maxClientWidth = offsetWidth- ceil(computedStyle.borderLeftWidth)- ceil(computedStyle.borderRightWidth); // ClientWidth 最大值(理想情况下, 也就是不存在滚动条)var scrollbarWidth = maxClientWidth // 滚动条大小- ceil(ele.clientWidth);console.log(scrollbarWidth); // 17
元素内部实际可用区域
可用区域其实就是内容可以排放的空间, 其可见区域宽度其实就是 clientWidth - paddingLeftWidth - paddingRightWidth 的值.
比求滚动条宽度相对简单点, 只需要知道左右内边距的大小即可.
var selector = function (selectorName) {if (!selectorName && !(typeof selectorName === "string")) { return {} };var prefix = /^#/;if (document.querySelector) {selectorName = prefix.test(selectorName) ? selectorName.substr(1) : selectorName;return document.querySelector(selectorName);} else if(document.getElementById) {selectorName = prefix.test(selectorName) ? selectorName : "#" + selectorName;return document.getElementById(selectorName);}}var selector = selector("box"); var computedStyle = window.getComputedStyle === undefined ? ele.currentStyle : window.getComputedStyle(ele);var ceil = function (v) {return Math.ceil(parseFloat(v))}console.log(ele.clientWidth - ceil(computedStyle.paddingLeft) - ceil(computedStyle.paddingRight));
上面计算方式没有什么固定,仅供参考. 更好计算方式也可以推荐下. ~ 比如通过 getBoundingClientRect()
详细了解 clientWidth、clientHeight、clientLeft、clientTop 以及几个常用的场景相关推荐
- 机器学习算法原理:详细介绍各种机器学习算法的原理、优缺点和适用场景
目录 引言 二.线性回归 三.逻辑回归 四.支持向量机 五.决策树 六.随机森林 七.K-均值聚类 八.主成分分析(PCA) 九.K近邻算法 十.朴素贝叶斯分类器 十一.神经网络 十二.AdaBoos ...
- 看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight
每次用JS获取页面的高宽时总都是相当的揪心,同一个属性在不同的浏览器或不同的W3C标准下所表示的意思都不尽相同.以下就针对页面的实际高宽和可见区域做个总结,以便大家查阅! 1. 在W3C标准的情况下 ...
- 网页宽高clientWidth clientHeight获得数值不对的问题
当网页内容撑不满一屏时,通过以下代码获得整个网页高度会有问题 document.body.clientHeight;document.body.clientWidth; 得到的宽高不对,可能是因为ht ...
- 一文看懂js中元素的客户区大小(clientWidth,clientHeight)
元素的客户区 元素的客户区大小,指的是元素内容及其内边距(padding)所占据的空间大小. 相关属性如下: clientWidth:元素内容区宽度+元素左右内边距 clientHeight:元素内容 ...
- 妈耶,讲得好详细,十分钟彻底看懂深度学习常用优化器SGD、RMSProp、Adam详解分析
深度学习常用优化器学习总结 常用优化器 SGD RMS Prop Adam 常用优化器 SGD 基本思想:通过当前梯度和历史梯度共同调节梯度的方向和大小 我们首先根据pytorch官方文档上的这个流程 ...
- 详细盘点joomla1.5和2.5中那些常用的扩展
joomla之所以被认可,这与扩展开发离不开关系,有大量的公司靠开发扩展来吃饭,纵观国内开源的产品,扩展开发基本上就是作者自己,出名的dedecms,discuz等虽然在慢慢改变这种状态,但是参与者还 ...
- numpy的基本使用 附python代码详细讲解(numpy函数,创建数组,常用属性,索引切片,数组的复制,修改维度,数组的分割、拼接、转置)
目录 使用array创建数组 使用arange创建数组 Numpy中的随机数创建 ndarray对象的常用属性 其他方式创建数组 索引和切片(一位数组.二维数组) 数组的复制 修改数组的维度 数组的拼 ...
- 详细——Ubuntu16.04系统装机后基本配置和常用软件安装记录
本博文主要是针对Ubuntu16.04系统安装之后所需要进行的一些操作和配置,以方便大家能够快速熟悉Ubuntu系统,不至于对它那么陌生. 文章目录 一.需要卸载的软件 二.基本设置 设置屏幕截图快捷 ...
- 详细的视频追踪检测分类、监控追踪常用数据集
大量的视频和路面实况. http://imagelab.ing.unimore.it/visor/ 3D Photography Dataset http://www-cvr.ai.uiuc.edu/ ...
- js 获取元素位置和大小_js 位置_Js宽度高度(详解)
一.js 获取元素的位置和大小----只读属性 1.元素的大小和位置 1.可视大小和位置 clientLeft,clientTop,clientWidth,clientHeight clientLef ...
最新文章
- android studio so文件的添加
- python免安装环境 linux_python如何打包脚本(库也一起打包),直接在linux环境运行,不需要安装库?...
- python基础回顾
- IIS设定 CORS 跨域请求(跨域)
- [css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法
- 【转】C#数据结构-有限状态机
- extjs 日期不显示
- linux里的网卡自动连接,【Raspberry Pi】USB无线网卡自动连接
- Mac10.12开启NTFS读写
- 【WPF-HelixToolkit】史陶比尔RX160L 机器人仿真器源码学习
- bat windows10系统垃圾清理---
- Linux软件更新与安装
- 贝叶斯分类器matlab实现
- C盘空间不够?教你简单扩容C盘空间
- 数据分析师的工作绩效到底是什么?
- python量化股票源码_使用Python写一个量化股票提醒系统
- Python中strip函数几种用法
- window Azure 部署java 应用
- 高考 计算机专业自己陈述,高三同学自我陈述报告(精选10篇)
- 渗透之——Metasploit渗透BSPlayer V2.68