JavaScript获取DOM元素位置和尺寸大小

最新推荐文章于 2020-06-10 23:25:35 发布
最新推荐文章于 2020-06-10 23:25:35 发布
阅读量827 收藏
点赞数
分类专栏： 前端开发

在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些基本知识。

基础概念

为了方便理解，我们需要了解几个基础概念，每个HTML元素都有下列属性

offsetWidth

clientWidth

scrollWidth

offsetHeight

clientHeight

scrollHeight

offsetLeft

clientLeft

scrollLeft

offsetTop

clientTop

scrollTop

为了理解这些属性，我们需要知道HTML元素的实际内容有可能比分配用来容纳内容的盒子更大，因此可能会出现滚动条，内容区域是视口，当实际内容比视口大的时候，需要把元素的滚动条位置考虑进去。

  1. clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分

  2. offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分

  3. clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度

  4. offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离

  5. offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null

写个小例子方便理解

offbye
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
本篇文章，小编为大家介绍关于用JavaScript获取DOM元素位置和尺寸大小的方法，有需要的朋友可以参考一下
JavaScript之DOM的位置、属性、方法
努力学习前端的阿猪
02-04 2888
文章目录前言一、DOM的位置1.1、`getBoundingClientRect()`注意1.2、`element.scrollLeft && element.scrollTop`1.3、`offsetParent && offsetLeft && offsetTop`-元素自身相关的属性（开发中不常用到）1.4、`element.clientTop && element.clientLeft` 前言 前段时间的开发工作涉及
JS中获取 DOM 元素的绝对位置实例详解
夕空
05-23 1457
原文：https://www.jb51.net/article/138770.htm 这篇文章主要介绍了JS中获取 DOM 元素的绝对位置，详细介绍了各种获取dom元素绝对位置的方法及对应的兼容性，需要的朋友参考下吧 在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置，例如 本文 左侧的悬浮导航，当页面滚动到它以前会正常地渲染到文档流中，当页面滚动超过了它的位置，就会始终悬浮在左侧。 ...
【记录】Javascript获取Dom元素位置
weixin_34395205的博客
05-06 466
有时候项目中会用到用js获取元素位置来定位元素，其实也很简单 DOM的定义如下图   获取元素的位置属性可以通过 HTMLElement.offsetLeft HTMLElement.offsetTop 但是，这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置，而是相对于其父元素位置的相对位置，也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计...
图示：DOM元素各种位置属性
weixin_30778805的博客
10-15 171
转载于:https://www.cnblogs.com/Ceri/p/7670622.html
如何获取一个dom元素的绝对位置
小荷才露尖尖角
05-18 2008
   应用场景：鼠标滑过某元素时，需要弹出一个信息标签，标签的位置要根据滑过元素的位置而定。      难点：目标元素并不一定是absolute的，因此不能简单的通过top，left这种属性获取。元素可能包裹在n个父元素内，需要把这些因素都考虑进去。     解决思路：先获取该元素的offsetLeft和offsetTop，然后取它的offsetParent，并向外循环，累加这些left和...
JavaScript DOM元素尺寸和位置
12-10
一 获取元素的CSS大小  1.通过style内联获取元素的大小  代码如下:  var box = document.getElementById(‘box’); // 获得元素;  box.style.width; // 200px;  box.style.height; // 200px; // PS:style...
vue-drag-resize-rotate:vueComponent拖动，调整大小和旋转
05-27
基于 vue2.6 的一个 dom 元素拖拽、缩放和旋转的组件; 支持基本的触点控制、宽高位置范围值、子父级嵌套、锁定定比例和层级等； 支持基本的事件回调，提供元素实时宽高位置信息数据； 目前仅支持 pc 端、px 的 css ...
程序天下:JavaScript实例自学手册
07-08
第21章 流行技术：DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用userData保存checkbox标记 21.4 使用DOM实现控件的替换 21.5 使用DOM实现控件的复制 21.6 使用...
JavaScript获取DOM元素位置和尺寸
pepping798的专栏
10-26 1956
clientHeight和clientWidth描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分。 clientHeight就是div的高度+上下的padding，clientWidth同理 offsetHeight和offsetWidth描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分。 offsetHeight是client
DOM元素的尺寸和位置
youhebuke225的博客
05-25 357
目录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元素定位属性的深入学习
diandi5157的博客
03-29 125
关于DOM元素定位属性的深入学习 Published by sansan at 2:56 pm under 前端|Front-End 以前写JS程序的时候，经常碰到了定位的问题。但每次都看到一半，找到需要的属性就了事了。 今天下了狠心，要花点时间，彻底地弄明白他。 以下内容看着有点眼熟也不用奇怪，因为是参考了多篇前辈的文章汇总而成，嘿嘿。 宽度、高度 jQuery(’#elem...
[22]DOM元素尺寸和位置
北川Alex的个人博客
06-02 322
本文主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式，以便更好的理解。一．获取元素CSS大小1.通过 style内联获取元素的大小var box = document.getElementById('box'); //获取元素 box.style.width; //200px、空 box.style.height; //200px、空PS：style 获取只能获取到行内 style 属
JS获取DOM元素位置与大小
weixin_30521649的博客
12-29 623
每一个HTML元素都有以下属性 offsetWidth offsetHeight offsetLeft offsetTop clientWidth clientHeight scrollWidth scrollHeight scrollLeft scrollTop 1. 偏移量(offsetHeight offsetWidt...
javascript笔记--（第二十二章）DOM元素尺寸和位置
我是新手F1的专栏
02-07 318
获取元素CSS大小 通过style内联获取元素的大小 style获取只能获取到行内style属性的CSS样式中的宽和高，如果有获取；如果没有则返回空。 Document var box = document.getElementById('box'); console.log(box.style.width);//200px console.l
DOM元素尺寸和位置
shaonian1996
02-24 635
一 获取元素大小1 通过内联获取元素的大小<body> <div id="box" style="width: 100px;height: 100px"></div> </body> <script type="text/javascript"> var box=document.getElementB
JS中DOM元素的位置
weixin_46421045的博客
06-10 345
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px;
uniapp获取dom元素
最新发布
09-18
例如，可以使用select()方法选择一个DOM元素，使用boundingClientRect()方法获取DOM元素的位置和大小信息，并使用exec()方法执行操作。示例代码如下： ```javascript uni.createSelectorQuery().select('.my-element...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值