JavaScript DOM——元素大小、元素偏移

最新推荐文章于 2022-08-03 09:44:08 发布
最新推荐文章于 2022-08-03 09:44:08 发布
阅读量505 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DebbyOctober/article/details/108253063
版权
本文探讨了JavaScript中DOM元素的大小和偏移，包括offsetWidth、offsetHeight属性，它们包含了边框和内边距的计算，但不包含外边距。通过案例解释了边框对元素大小的影响，并介绍了元素的偏移量offsetLeft和offsetTop，它们如何在定位和滚动上下文中工作。
摘要由CSDN通过智能技术生成

DOM—元素大小—元素偏移

一、元素大小

offsetWidth
offsetHeight
注：
1》offsetWidth、offsetHeight是没有加入单位的 (返回是number数值类型)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

#区分：与getComputedStyle字符串类型（加了单位的）不同
在这里插入图片描述

在这里插入图片描述

2》可以计算的两个值
a)计算边框 (border)
b)计算内边距 (padding)
不能记算外边距 (margin)，和盒子的宽

最低0.47元/天 解锁文章
喋喋小菜鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM元素偏移量offset的介绍
weixin_50266823的博客
09-21 642
<!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> *{ top
DOM样式偏移量
银河威尔的web专栏
11-08 1053
DOM样式 1、float由于是关键字在DOM2样式中规定为style.cssFloat，而IE支持为styleFloat。 2、style的属性和方法： 1）、cssText:访问style的css代码 2）、length:应用给元素的css属性的数量 3）、parentRule:表示css信息的CSSRule对象 4）、getPropertyCSSValue(propertyName):返回包
Dom中偏移父节点及偏移位置
Always-Learning
01-14 493
获取元素的偏移父节点 元素的偏移位置指的是相对于最近定位的父节点，如果没有定位的父节点一直往上找，直到找到body元素。 获取元素的水平和垂直偏移位置
js获取元素的偏移量offset简单方法(必看)
10-19
下面小编就为大家带来一篇js获取元素的偏移量offset简单方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
滚动条出现的原理
weixin_30781107的博客
09-25 1241
总结 容器元素的 clientWidth 小于 scrollWidth 时，在容器元素上会出现滚动条。 容器元素的 scrollWidth 等于内部元素的 clientWidth 由于 clientWidth 不包含滚动条，所以当滚动条已存在时。即使容器的宽度能完全展示内部元素，滚动条依然会存在。即只有当内部元素的宽度 = 容器 clientWidth + 滚动条宽度时滚动条才消失。 ...
DOM基础笔记——元素大小和偏移
Yomuki的博客
12-11 235
1、.offsetParent 只读属性，返回一个指向最近的带有定位或者为（table,td,th,body）的父元素。它返回的是一个元素对象。 parentObj = element.offsetParent; 2、.offsetLeft 是一个只读属性，返回当前元素左上角相对于.offsetParent节点的左边界偏移的像素值。 即元素左边距离.offsetParent元素左边的距离。 父绝子相，子left-20px效果： 5、.offsetTop 返回当前元素相对于其.offse
JavaScript 中 DOM 元素的获取和相关操作——笔记整理0517
张静的博客
05-19 1418
一、什么是DOM元素 DOM (Document Object Model) 即文档对象模型。简称DOM 元素，即HTML元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。（引用自菜鸟） JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 Jav
JavaScriptDOM对象控制HTML元素
不积跬步，无以千里
09-27 363
1.认识DOM ——- 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。先来看看下面代码: ![这里写图片描述](http://img.blog.csdn.net/20170927204638774?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5
VUE实时监听元素距离顶部高度的操作
10-15
handleScrollx方法中，通过console.log打印了两个重要信息：滚动条的垂直偏移量（window.pageYOffset）以及具有特定ref属性的元素（pronbit）距离页面顶部的垂直距离（this.$refs.pronbit.getBoundingClientRect()....
javascript获取元素偏移量的方法有哪些
01-19
通过四个属性可以获得元素的偏移量： 1、offsetHeight: 元素在垂直方向上占用的空间的大小，（像素）。包括元素的高度，（可见的）水平滚动条的高度，上边框高度和下边框高度。 2、offsetWidth:元素在水平方向上占用的空间的大小，，（像素）。包括元素的宽度，（可见的）垂直滚动条的高度，左边框高度和右边框高度。 3、offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离； 3、offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离；
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
11-22
《牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作》 jQuery是一种广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作，提供了丰富的API和强大的选择器，使得开发者能够更高效地...
DOM 元素的尺寸和偏移属性
dark_cy的博客
12-20 347
clientWidth、clientHeight 等
JavaScript DOM:元素偏移量 offset 系列、元素可视区 client 系列、元素滚动 scroll 系列
七七的博客
08-03 353
offset、client、scroll、window.pageYOffset比较
js 获取dom的高度和宽度，可滚动宽高距离，当前滚动位置
PrimaryColor
02-22 6125
dom节点属性： clientWidth（不推荐）：dom节点可视区域的宽度。（可滚动距离不算在内哈。） clientHeight（不推荐）：dom节点可视区域的高度。（可滚动距离不算在内哈。） offsetWidth：dom节点可视区域的宽度，包含边框、内边距。（可滚动距离不算在内哈。） offsetHeight：dom节点可视区域的宽度，包含边框、内边距。（可滚动距离不算在内哈。） scrollWidth：dom节点的内容可滚动距离，横向滚动距离。（注意：overflow:hidden时也能获
js实现拖拽（带阴影）
duo1207的博客
08-12 2894
HTML代码: &lt;p&gt; ksjdfkjlksjfdksjfskjfskljldffffffffffffffffffffffff &lt;/p&gt; &lt;div id="div"&gt;&lt;/div&gt; css代码： &lt;style&gt; body{ padding: 0; margin: 0; } ...
JavaScript-----元素偏移量offset
weixin_45904557的博客
06-20 2449
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位...
DOM节点获取元素的偏移量等属性词
shuailong1993的博客
05-25 656
节点属性 每一个节点都有自己的特点 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) 语法: 节点.nodeType 得到: 一个数字, 代表着这个节点的类型 元素节点: 1 属性节点: 2 文本节点: 3 注释节点: 8 例子: 将来我获取到某一个节点, 我不确定他是不是元素节点 我只要判断他的 nodeType === 1 那么这个节点一定是一个元素节点 2. nodeName(节点名称) 语法: 节点.nodeName 得到: 一个名称, 属于这个节点的名
页面DOM元素的scroll与offset相关属性
左岸
10-01 1787
1.offsetParent元素的offsetParent属性是距离该元素最近的一个具有定位的父辈元素，如果没有符合条件的父辈元素，那么body就是它的offsetParent。2.offsetWidth与offsetHeightoffsetWidth=width+横向padding值+横向border值+[横向滚动条width] 实际上，就是元素渲染到页面后的实际宽度尺寸，是否包含横向滚动条的宽
JavaScript DOM元素位置、大小与鼠标定位完全解析
"本文主要探讨JavaScript中关于DOM元素位置、大小和鼠标定位的相关知识，包括event对象、dom对象和style对象中的属性。作者通过一个具体的textarea元素实例来讲解，帮助开发者理解和掌握这些重要属性的使用。 在Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值