秒懂clientHeight/clientWidth/clientLeft/clientTop

已于 2023-12-08 10:34:44 修改
阅读量581 收藏 14
点赞数 8
文章标签： 前端 html css javascript
于 2023-12-07 14:50:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61597234/article/details/134854439
版权

clientHeight/clientWidth/clientLeft/clientTop

元素的内部高度/宽度/左边border的宽度/上面border的宽度

一、概念

clientHeight/clientWidth:返回元素的高度/宽度，包含padding，不包含boder、margin和滚动条；

clientTop/clientLeft：元素的顶部边框/左边框的宽度，不包含外边距和内边距；

以上全部为只读属性，返回值是像素，单位是px。

二、计算方式：

以clientWidth为例（标准盒模型时）：

存在滚动条时：content width + padding -scollbarWidth

不存在滚动条时： content width + padding

注：如果当前元素是行内元素，clientLeft返回0

三、示例：

此案例中高出现了滚动条，宽没有出现滚动条。（有滚动条时默认减去滚动条的宽度）

红色线表示clientWidth的可视区，红色文字表示clientWidth的计算方式

绿色线表示clientHeigth的可视区，绿色文字表示clientHeight的计算方式

蓝色为clientTop和clientLeft的可以区及计算方式。

右侧 #box 为相关样式

今天也要加油ya
关注
Web前端之 offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft
IT之旅 的博客
06-05 1727
Web前端之 offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft 一、写作缘由： 我想，这绝对是一次意外，对，如此的意外，让我莫名其妙的写下了这篇博文写下这个原因是我在做滚动文字(图片)的时候遇见了些困难，而不巧的是，就...
前端-JS进阶-offset/client/scroll
IU_aena的博客
09-09 569
前端-JS进阶-offset/client/scroll
详细了解 clientWidth、clientHeight、clientLeft、clientTop 以及几个常用的场景
yb305
11-23 4648
clientLeft、clientHeight、clientWidth、clientHeight clientWidth、clientHeight元素内部宽度和高度,clientLeft、clientTop获取元素内边距边框到边框的距离. 大概如下图所示: clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。 如上图所示, 计算方式为, 分为如下两种: 存在垂直滚动条 content width + paddin...
clientHeight offsetHeight scrollHeight clientWidth详解
07-21
clientHeight offsetHeight scrollHeight clientWidth详解
一次搞懂clientWidth、clientHeight、clientLeft、clientTop
最新发布
stpzhf的博客
07-29 109
clientWidth clientHeight clientLeft clientTop代码如下（示例）：
css clientheight、offsetheight、scrollheight详解
wangjun5159的专栏
02-07 1万+
介绍网上介绍clientheight、offsetheight、scrollheight的帖子很多，看后感觉明白了，一细想似乎又不明白了。为了获取更权威的解答，查阅了MDN 文档，希望能帮助后来人。为了加深理解，看后，最好做下后边的实验。 clientheightclientheight，内容的可视区域，不包含border。clientheight=padding+height-横向滚动轴高度。
scrollLeft、offsetLeft、clientLeft、clientHeight详解（转帖）
mdc333的专栏
01-26 695
scrollLeft、offsetLeft、clientLeft、clientHeight详解
clientwidth_JavaScript中的clientWidth和clientHeight
08-13 657
clientwidthUsing clientWidth and clientHeight you’re able to get the pixel dimensions of an HTML element. The dimensions are calculated using the dimensions of content inside the HTML element, along w...
浅析offsetLeft,Left,clientLeft之间的区别
09-04
`clientWidth`和`clientHeight`则分别表示元素内容区域的宽度和高度，不包括边框和滚动条。这两个属性通常用于获取元素可视内容的尺寸。 关于浏览器的兼容性问题，`offset*`属性在所有现代浏览器中都得到良好支持，...
iview/viewUI库组件封装学习——Affix
weixin_45440813的博客
03-03 851
基本逻辑：该UI组件是在满足特定条件下触发fixed效果，和css3中得sticky很相近。首先此组件涉及三个主要参数，分别是滚动条的滚动距离scrollTop（window.scrollTop）、组件元素的BoundingClientRect.top 即该组件距离浏览器可视区域的距离，还有组件接收用户参数offsetTop的值，如何保证元素距离可视区顶部为offsetTop的值时将元素固定？BoundingClientRect.top的初始值即scrollTop为0时，当我们滚动滚动条时BoundingC
JavaScript（四）（DOM/Node/NodeList/Document/Element）
qq_43456781的博客
07-22 891
JavaScript（四）（DOM） 文章目录JavaScript（四）（DOM）六、DOM33. DOM 概述33.1 DOM33.2 节点33.3 节点树（Document只有两个子节点doctype/html根节点）34. Node 接口34.1 属性34.1.1 Node.prototype.nodeType34.1.2 Node.prototype.nodeName34.1.3 Node.prototype.nodeValue34.1.4 Node.prototype.textContent34.
clientWidth与clientHeight，offsetWidth与offsetHeight
Always-Learning
11-28 446
clientWidth与clientHeight 返回值 返回的是元素的content + padding的部分 这两个属性都是只读的，不能进行修改，假如你给clientWidth进行赋值，是不起作用的。 offsetWidth与offsetHeight 返回值 包括content + padding + border ...
JS 中样式显示（clientWidth和clientHeight、offsetLeft、scrollHeight ）
weixin_44134816的博客
03-21 330
1.clientWidth和clientHeight –这两个属性可以获取元素的可见宽度和高度 –这些属性是不带px的，返回都是数字，可以直接计算 –会获取元素的宽度和高度，包括内容区和内边距 –这些属性只能只读，不能修改 var obj=documents.getElementByName(“demo”) obj.clientWidth=300 2.offsetParent –获取当前元素的定位父元素 –获取到离当前元素最近的开启定位的祖先元素 –如果所有的祖先元素都没有开启定位，则返回body obj.
详解DOM对象中clientWidth、offsetWidth等属性
热门推荐
葉無聞
04-17 1万+
我们有时需要获得鼠标在某盒子中的位置，或者是随意移动某盒子的位置，在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说（包括我），看到这些就头疼，因为感觉意思都相近，但作用却不同，所以今天天我就来捋一捋，搞清楚，后面好干活。好吧，废话不多说，开始吧。 先上一下示例代码，下面要用到。 HTML: ...
js弹力球实例（clientHeight clientWidth）
yc刺猬的拥抱的博客
06-23 326
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> &
clientWidth、clientHeight、 clientLeft、clientTop的区别
weixin_45866961的博客
05-15 408
clientWidth element.clientWidth 属性表示元素内部的宽度，以像素计。 element.clientWidth=Width+padding clientWidth的特殊情况 当在根元素上使用clientWidth时(或者在body标签上，如果文档是在quirks(怪异)模式下)，将返回viewport的宽度(不包括任何滚动条). 该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用 element.getBoundingClientRect()。 clientHe..
clientWidth clientHeight offsetWidth offsetHeight scrollWidth scrollHeight offsetLeft offsetTop
蒲公英芽的博客
01-05 658
clientWidth、clientHeight，指元素的width+padding-滚动条的宽度和高度 来一张图说明一下： body的clientWidth为body的width+padding body的clientHeight是内容高度，如果没有内容，高度为0 html的clientWidth为浏览器窗口的宽度，不包括滚动的宽度 html的clientHeight为浏览器窗口的高度，不包...
JavaScript，clientWidth，clientHeight，offsetHeight，offsetWeight，offsetParent，offsetLeft，offsetTop等用法
weixin_43228946的博客
08-19 441
clientWidth:返回元素的可见宽度。 clientHeight:返回元素的可见高度。 这两个属性都是不带px,返回的是一个数字，可直接进行计算会获取元素宽度和高度，包括内容区和内边距. offsetHeight：返回元素的高度。 offsetWidth：返回元素的宽度。 获取元素的整个的高度和宽度，包括内容区、内边距和边框 offsetParent：可以获取当前元素的定位父元素，会获取当前元素最近的开启了定位的父元素。如果所有的祖先元素都没有开启定位则返回body offsetLeft：返回元素的水
DOMElement修改元素位置
06-10
DOMElement可以通过修改元素的位置属性，实现改变元素在文档中的位置。常用的位置属性包括：offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeight、scrollWidth、scrollHeight、scrollTop、scrollLeft等。 其中，offsetTop和offsetLeft表示元素相对于父元素的偏移位置，clientTop和clientLeft表示元素的边框宽度，clientWidth和clientHeight表示元素的可见宽度和高度，scrollWidth和scrollHeight表示元素的滚动宽度和高度，scrollTop和scrollLeft表示元素当前滚动的位置。 可以通过修改元素的位置属性，实现元素的平移、缩放、定位等效果。例如，将ID为“example”的元素向右平移50像素，可以如下代码实现： ```javascript var exampleElement = document.getElementById("example"); exampleElement.style.left = "50px"; ``` 注意，DOMElement的位置属性可以通过CSS样式表或JavaScript代码进行修改，具体应用需要根据实际需求进行灵活应用。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值