dom元素尺寸和位置

最新推荐文章于 2022-02-28 19:03:02 发布
最新推荐文章于 2022-02-28 19:03:02 发布
阅读量102 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woyaoshengzhang/article/details/117283355
版权

一、尺寸

       

  •  clientWidth / clientHeight      包含元素内容 + padding

        clientWidth 270 , clientHeight 100

  • scrollWidth / scrollHeight      包含元素内容 + padding （ 包括溢出内容）

       scrollWidth 270 , scrollHeight 100

            

      如果内容溢出该元素，并且存在滚动条，值为 真实内容高度（含溢出高度） + padding

       scrollWidth 270 , scrollHeight 140

     

      如果内容溢出该元素，并且没有滚动条，值为 真实内容高度（含溢出高度） + 1个padding

       scrollWidth 270 , scrollHeight 130

  • offsetWidth / offsetHeight      包含元素内容 + padding + border

       offsetWidth 280 , offsetHeight 110

二、位置

       

  • offsetLeft / offsetTop   获取当前元素相对于(有绝对、相对、固定定位的)父元素的位置

        inner : offsetLeft  0 , offsetTop 40

三、滚动条位置

       

  • scrollLeft / scrollTop   获取滚动条位置，可赋值

       scrollLeft  0 , scrollTop 30

woyaoshengzhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM元素尺寸和位置
12-10
一 获取元素的CSS大小  1.通过style内联获取元素的大小   代码如下:      var box = document.getElementById(‘box’);    // 获得元素;      box.style.width;                             // 200px;      box.style.height;                            // 200px; // PS:style获取只能取到行内style属性的CSS样式中的宽和高,如果有,则获取;如果没有则返回空; 2.通过计算获取元素的大小 代码如下:  
DOM元素尺寸
ikscher的专栏
11-22 840
*{margin:0px;padding:0px;} #d1{width:800px;height:610px;border:10px solid #1ed;} #d2{width:400px;height:200px;background-color:red;margin:100px;padding:60px;border:40px solid #555;} window
Dom尺寸和位置
weixin_50053454的博客
02-28 367
1.clientWidth,clientHeight 网页的可视高度 2.offsetWidth,offsetHeight 网页的实际高度 3.scrollWidth,scrollHeight 网页占用的高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device..
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
在JavaScript中，DOM元素的位置和尺寸大小是网页动态交互中不可或缺的部分。DOM（Document Object Model）是HTML和XML文档的结构化表示，它允许我们通过编程方式操作文档的各个元素。本文将深入探讨如何利用...
使用jQuery监听DOM元素大小变化
10-22
当需要监听DOM元素尺寸变化时，传统方法是使用`window.onresize`事件，这会在浏览器窗口大小改变时触发。然而，这种方法不适用于非窗口对象，因为`resize`事件只对`window`有效。为了实现对任意元素的尺寸监听，我们...
DOM元素尺寸：offsetWidth、clientWidth、scrollWidth
hhhh
04-14 323
目录偏移尺寸：所有视觉空间客户端尺寸：内部视口大小滚动尺寸确定大小 本文尺寸除了标记可写的之外 都是只读，每次访问都要重新计算。访问过多会影响性能，多次使用同一值时最好保存在局量中。 偏移尺寸：所有视觉空间 以边框为界定来算 offsetTop 元素上边框外侧距离父元素上边框内侧的像素数 offsetLeft 可以通过这两属性获取元素在页面中的偏移量 function getLeft(ele){ let left=ele.offsetLeft; let current=ele.offse
js基础之DOM尺寸及位置
时光清浅处，一步一安然
08-11 727
js基础之DOM尺寸及位置 一、DOM尺寸 以下表格属性中，前三种属性都是只读属性 属性 描述 box.style.width，box.style.height 只能获取到内联style属性的CSS样式中的宽和高，如果有，获取。如果没有，则返回空 getStyle(box, “width”)，getStyle(box, “width”) 通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。如果本身设置大小，它会返回元素的大小，如果本身没有设置，非IE浏
JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
01-14
JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
DOM元素的尺寸和位置
youhebuke225的博客
05-25 366
目录DOM元素的尺寸和位置1.尺寸1.1 尺寸API1.2 获取视口的尺寸2. 位置2.1 位置API2.2 getBoundingClientRect()3. 滚动元素3.1 API DOM元素的尺寸和位置 1.尺寸 我们首先准备好一个盒子 #box{ width: 200px; height: 200px; padding: 100px; border: 20px solid black; margin: 10px; background-color: red; } 1.1 尺寸API
dom中的元素尺寸属性
赵佳敏的博客
12-03 572
目录一、尺寸属性1. offsetHeight、offsetWidth---网页可见区域宽高（含边框）2. clientHeight、clientWidth---网页可见区域宽高（不含边框）3. style.width、style.height----内容区域的宽高4. scrollWidth、scrollHeight----网页正文全文宽高（包括不可见部分）二、元素偏移1. offestTop---------上偏移2. offsetLeft---------左偏移三、两个滑动距1. scrollTop.
DOM元素尺寸和位置
shaonian1996
02-24 637
一 获取元素大小1 通过内联获取元素的大小&lt;body&gt; &lt;div id="box" style="width: 100px;height: 100px"&gt;&lt;/div&gt; &lt;/body&gt; &lt;script type="text/javascript"&gt; var box=document.getElementB
C1:DOM 元素的尺寸和位置
weixin_34409741的博客
02-04 117
DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括内容区宽/高,padding,border,不包括margin.如果元素的box-sizeing是border-box,那么此时设置的style.width/style.height就是该元素的offsetWidth/offset...
DOM初探（17）——查看元素的尺寸与位置
abraham的博客
03-02 8433
四：DOM基本操作： 查看元素的尺寸： dom.offsetWidth,dom.offsetHeight(视觉上的宽高，不可能包含margin) 查看元素的位置： dom.offsetLeft,dom.offsetTop 对于无定位父级的元素，返回相对文档的坐标； 对于有定位父级的元素，返回相对最近的有定位的父级的坐标。 dom.offsetP...
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 3401
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别！（2）
小苏(º﹃º )的博客
10-21 2412
https://juejin.cn/post/6844903861212168200
offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解
weixin_34408717的博客
10-13 148
el.offsetHeight = height + padding + border（滚动条是在边框内的，自然也包括在内） el.clientHeight = 可视化看到的高度 (就是content的高度) el.scrollHeight = 整个元素的高度 （ 包括了clientHeight看不到的那部分，一般就是你css设置的元素高度） el.offsetTop = 子元素的外边框到父元素的...
js监听dom元素大小变化
最新发布
04-29
在网页开发中，经常需要监听 DOM 元素的大小变化，以便进行动态布局或其他操作。而 JavaScript 提供了一种方便的方法来实现 DOM 元素大小变化的监听。 首先，要监听 DOM 元素的大小变化，需要知道 DOM 元素的尺寸。获取 DOM 元素的尺寸可以通过其属性和方法来实现。比如，可以通过元素的 clientWidth 和 clientHeight 属性获取其内容区域的宽度和高度。 然后，要监听 DOM 元素大小的变化，可以使用 MutationObserver API。MutationObserver API 是浏览器提供的一种用于监听 DOM 变化的 API，它可以监听 DOM 元素的属性、子节点等变化，并在这些变化发生时触发回调函数。 使用 MutationObserver API 监听 DOM 元素大小变化的步骤如下： 1. 创建一个 MutationObserver 对象。 2. 使用 MutationObserver.observe 方法监听目标 DOM 元素的变化。 3. 在回调函数中判断 DOM 元素的尺寸是否发生了变化。 4. 如果尺寸发生变化，则进行相应的操作。 例如，以下代码可以实现监听某个元素宽度变化并输出宽度变化的值： ``` const target = document.querySelector('#target'); const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { const width = target.clientWidth; console.log(`Width changed to ${width}`); } }); }); observer.observe(target, { attributes: true }); ``` 最后，需要注意的是，使用 MutationObserver 监听 DOM 元素大小的变化虽然方便，但也存在一些限制，例如对于表格的大小变化无法捕获等，需要根据实际情况选择合适的方法来实现 DOM 元素大小的监听。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值