JS中获取元素尺寸

最新推荐文章于 2023-07-31 16:04:39 发布
最新推荐文章于 2023-07-31 16:04:39 发布
阅读量506 收藏 2
点赞数 2
分类专栏： JS 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44646986/article/details/104675084
版权

offsetParent

文档里每个元素其实都可以找到一个“定位祖先元素”，即由里到外往外层第一层符合下面一个特征的，就是“定位祖先元素”

  • CSS 定位（position 为 absolute、relative 或 fixed），
  • <td>、<th>、<table>
  • <body>

其实CSS的绝对定位也是参考这个“定位祖先元素”的

这个元素可以通过offsetParent来获取到，一般情况下这个元素会是<body>，如下例子

上面说的每个元素，不包括<body><html>，它们的offsetParent为null
另外还有几种情况offsetParent为null

  • CSS定位为fixed的元素
  • 未出现在文档中的元素（display:none）
<body>
  <div>
    <div id='wrapper'>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
最低0.47元/天 解锁文章
小蓝Lany
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 获取元素位置和大小_js 位置_Js宽度高度（详解）
天马3798
12-10 3580
如obj.style.top、obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px)，同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。该属性指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度，即滚动条宽高度。
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
chelen_jak的专栏
10-29 708
原文出处：https://www.imooc.com/article/17571 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下： clientHeight和offsetHeight属...
JS获取元素的位置与尺寸
I_try的博客
06-12 352
原生 1、内高度、内宽度： 内边距 + 内容框 element.clientWidth element.clientHeight 2、外高度，外宽度： 边框 + 内边距 + 内容框 element.offsetWidth element.offsetHeight 3、上边框、左边框 element.clientTop element.clientLeft 4、元素的大小及其相对于视口的位置 复制代码 element.getBoundingClientRect() //x\y:元素的左上角和父元素左上角的距离
JS获取元素尺寸和位置
luoage的专栏
11-03 290
获取元素尺寸的方法 1.通过clientWidth, offsetWidth, scrollWidth. clientWidht, clientLeft, clientX, offsetWidth, scrollWidth等具体的含义看DOM。 clientWidth=width+padding相当jQuery的innerWidth(); offsetWidth=width+padding+bo
用js获取位置，距离，尺寸
m0_50056346的博客
06-15 161
一：样式值的获取 1：获取行内样式 obj.style.样式名 2：获取非行内样式 parseInt(window.getComputedStyle(元素，null).样式属性) 3：IE 浏览器写法 元素.currentStyle[属性值] 二：获取元素尺寸 1：content+padding+border offsetWidth offsetHeight 2：content+padding clientWidth clientHeight 3：content parseInt(w
JavaScript获取元素尺寸和大小操作总结
10-24
本文总结了使用JavaScript获取指定元素大小、位置的几种方式。如果你用的是JQuery，则获取元素大小是非常简单的。但是我们还是有必要知道如何通过原生JavaScript来获取,需要的朋友可以参考下
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
本文将深入探讨如何利用JavaScript获取DOM元素的位置和尺寸，并解释相关属性。 首先，我们要了解几个关键的属性： 1. `offsetWidth` 和 `offsetHeight`：这两个属性返回元素的完整外尺寸，包括内容、内边距和边框...
JS中各种尺寸的获取
01-08
在JavaScript中，我们可以用不同的属性来获取页面和元素的各种尺寸，这对于精确控制页面显示和动态调整布局至关重要。下面将详细阐述这些尺寸属性及其应用。 1. **clientWidth/clientHeight**： 这两个属性用于...
原生JS获取元素的位置与尺寸实现方法
10-19
下面小编就为大家带来一篇原生JS获取元素的位置与尺寸实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JQuery获取元素尺寸、位置及页面滚动事件应用示例
10-17
本示例主要探讨了如何使用jQuery获取元素的尺寸、位置以及如何处理页面滚动事件，同时通过一个购物车动画的案例展示了这些功能的实际应用。 首先，我们来看如何获取元素的尺寸。jQuery提供了多种方法来获取元素的...
JS获取元素尺寸、元素偏移量、浏览器窗口尺寸
qq_48937489的博客
12-02 684
获取元素的尺寸，获取元素的偏移量，获取浏览器的窗口尺寸（DOM级别，BOM级别）
JS获取元素宽高的两种情况
weixin_30883271的博客
07-16 212
JS获取元素宽高分两种情况， 一、内联样式，也就是直接把width和height写在HTML元素中的style里： 　　这种情况使用 document.getElementById('xxx').style.width即可获取宽度（高度同理） 二、写在CSS样式表中，这种情况使用document.getElementById('xxx').style.width是获取不到的 　　...
JS 获取元素的大小（高度和宽度）
最新发布
Ax3_28的博客
07-31 1142
offsetHeight = border-top-width（上边框的宽度） + 内上边距 + 高度 + 内下边距 + border-buttom-width（下边框的宽度）获取元素可视部分的高度，即 css 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内。clientHeight = 内上边距 + 高度 + border-button-width（下边框的宽度）scrollHright = 内上边距 + 包含内容的完全高度 + 内下边距。
关于Js中获取元素的尺寸和位置
一条路走到白
05-02 475
1、clientWidth 作用：获取元素可视化宽度注意：clientWidth=width+padding 2、clientHeight 作用：与clientWidth类似 3、offsetWidth 作用：获取元素宽度注意：offsetWidth=Width+padding+border 4、offsetHeight 作用：同offs
JavaScript获取DOM元素位置和尺寸大小
weixin_33915554的博客
11-19 469
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些基本知识。 基础概念 为了方便理解，我们需要了解几个基础概念，每个HTML元素都有下列属性 offsetWidth clientWidth ...
offsetwidth详解_offsetWidth和它的兄弟姐妹们
热门推荐
weixin_39905500的博客
12-01 2万+
我们在取元素的宽度时脑海里就能想起如offsetWidth、 clientWidth、 scrollWidth 、style.width，那它们有什么区别呢？先看一下官方定义：一、HTMLElement.offsetWidth是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上...
JS获取DOM元素位置与大小
山鬼谣弋痕夕的博客
08-29 2608
JS获取DOM元素位置与大小 https://www.cnblogs.com/mackxu/archive/2012/12/29/html_window_dimension_position.html 每一个HTML元素都有以下属性 offsetWidth offsetHeight offsetLeft offsetTop clientWidth clientHe...
原生js获取元素尺寸以及jquery获取元素尺寸
weixin_45270759的博客
06-23 385
原生js获取 var box = document.getElementById("box"); box.clientWidth; //获取该元素宽度包含padding值 box.clientHeight; //获取该元素高度包含padding值 box.offsetWidth; //获取该元素宽度+padding +border box.offsetHeight; //获取该元素高度+pad...
js 获取元素实际尺寸
06-08
可以使用 `offsetWidth` 和 `offsetHeight` 属性来获取元素的实际尺寸，包括边框和内边距，单位为像素。例如： ```javascript var element = document.getElementById("myElement"); var width = element....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值