DOM基础笔记——元素大小和偏移

最新推荐文章于 2022-03-04 14:46:58 发布
最新推荐文章于 2022-03-04 14:46:58 发布
阅读量236 收藏
点赞数
分类专栏： js 文章标签： js dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yomuki/article/details/111033475
版权
这篇博客详细介绍了DOM中的几个关键属性：offsetParent、offsetLeft、offsetTop、offsetHeight和offsetWidth，以及它们与style属性的区别。通过实例解析了这些属性如何表示元素相对于父元素的位置和尺寸，并强调了offset与style在获取和设置样式值时的不同。
摘要由CSDN通过智能技术生成

目录

1、.offsetParent

2、.offsetLeft

5、.offsetTop

4、.offsetHeight

5、.offsetWidth

6、offset和style的区别

7、总结表

1、.offsetParent

只读属性，返回一个指向最近的带有定位或者为（table,td,th,body）的父元素。它返回的是一个元素对象。

parentObj = element.offsetParent;

2、.offsetLeft

是一个只读属性，返回当前元素左上角相对于.offsetParent节点的左边界偏移的像素值。

即元素左边距离.offsetParent元素左边的距离。

父绝子相，子left-20px效果：

5、.offsetTop

返回当前元素相对于其.offsetParent元素的顶部内边距的距离。

父相子绝，子top:-20px效果：

4、.offsetHeight

最低0.47元/天 解锁文章
Yomuki
关注
专栏目录
js 导航滚动 滚动条原理讲解
拒绝成猿的程序员
10-22 1291
在制作导航时，希望左边的导航和右侧的内容区域可以联动显示，例如：左侧导航点到某个标题后，右侧的内容区域自动将此标题置顶 像Word中的导航窗口： 点击导航中的“文章2”时，右侧的内容区，自动将“文章2”内容滚动到置顶位置进行显示。 但是再点击“文章3”“文章4”时，右侧的内容区域就无法将其内容，滚动到置顶位置了。 滚动条展示原理图： 从上图可知： 可视区域高度/内容高度 = 滚动条长度/滚动条总长； 可滚动距离=内容高度-可视区域高度； 而 从图又可知：滚动条总长 =可视区域高.
滚动条原理分析(在使用纯C + API画列表及列表的滚动条时遇到的问题)
qq317408531的专栏
03-17 842
滚动条原理分析: 如上图: 列表可以区高度为 200, 子项为 10 个, 每个高度 20, 滚动条高度为 200, 假定滚动条上下按钮高度各为10, 则 滑动块大小为180, 如果数据总长是 400, 就有 200 的高度, 10 个\子项不可见, 则有如下形式: // 1 -----------------------------------------------------
滚动条出现的原理
weixin_30781107的博客
09-25 1247
总结 容器元素的 clientWidth 小于 scrollWidth 时，在容器元素上会出现滚动条。 容器元素的 scrollWidth 等于内部元素的 clientWidth 由于 clientWidth 不包含滚动条，所以当滚动条已存在时。即使容器的宽度能完全展示内部元素，滚动条依然会存在。即只有当内部元素的宽度 = 容器 clientWidth + 滚动条宽度时滚动条才消失。 ...
自定义滚动条原理
weixin_30315905的博客
01-11 117
关于实现自定义滚轮，首先要对整个布局进行了解： 1、1.需要显示的层级 和2.需要被滚动层级 的关系： 1--层级1具有 溢出隐藏 属性，目的是为了隐藏层级2多出的部分。 2--由于在层级1的包裹之下层级2溢出隐藏部分可以通过控制层级1的scrollTop进行滚动。2、 滚动条的位置： 1--如果你后面是通过控制层级2的top值进行滚动，那么滚...
上下滚动条出现的原因及解决办法
yhm_js的专栏
08-11 1264
上下滚动条出现的原因及解决办法 1.总结 1.1.现象   1.1.1.错误代码 <!DOCTYPE html><html lang="en"><head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     &l
JavaScript 中 DOM 元素的获取和相关操作——笔记整理0517
张静的博客
05-19 1419
一、什么是DOM元素 DOM (Document Object Model) 即文档对象模型。简称DOM 元素，即HTML元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。（引用自菜鸟） JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 Jav
JS学习笔记——jquery
lxy95512的博客
03-04 487
JavaScript库 JavaScript库:即library ,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库 就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、 show ,比如获取元素等。 简单理解:就是一一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。 jQuery的概念 jQuery是一一个快速、简
web前端攻城狮 学习笔记——CSS基础
weixin_43899481的博客
11-05 257
HTML大概一天就学完了，主要是一个网页的基本框架，然而只能实现基本的功能。CSS是对HTML的一个样式优化，可以对内部文字、图片的位置、颜色进行修改，使页面变得更简洁且美观。 1 CSS简介 CSS是用来定义页面元素的样式：设置字体和颜色；设置位置和大小；添加动画效果。 最简单的CSS代码 h1{ color:white; font-size:14px; } 对h1进行属性的设置 在页面中使用CSS有三种方式：外链、嵌入和内连。比较建议使用外链，如： <link rel="styl
JS学习笔记——原生js贪吃蛇
smile981005的博客
12-29 239
目前处于学习阶段，学习的总结，如果有错误的地方，还请指出指教！ 思路：把界面分成30*30个小方格，蛇头、身子和食物分别占据一个小方格。 定义全局变量 // 全局变量 var sw = 20, // 一个方块的宽度 sh = 20, // 一个方块的高度 tr = 30, // 行数 td = 30; // 列数 var snake = null, // 蛇的实例 food = null, // 事物实例 game = null;
滚动条详解
qq_40627648的博客
12-05 4913
对上一天学习的回顾: 　　1&gt;.&nbsp;&nbsp;TextOut函数的使用 　　　　TextOut函数的作用是使用系统当前选择的字体、背景颜色以及正文颜色将一个字符串输出到指定位置,&nbsp;函数原型: 　　BOOL TextOut( 　　 HDC hdc, //设备环境句柄 　　 int nXStart, //字...
android浏览器拖动条,自定义浏览器滚动条的实现原理
weixin_29585933的博客
05-28 440
利用这张布局图了解下浏览器滚动条的实现原理①需要显示的层级 和②需要被滚动层级 的关系：A：层级①具有 溢出隐藏 属性，目的是为了隐藏层级②多出的部分。B：由于在层级①的包裹之下层级②溢出隐藏部分可以通过控制层级①的scrollTop进行滚动。2、 滚动条的位置：通过控制层级①的scrollTop进行滚动，那么滚动条就需要在外面多加一层包裹层，目的就是让滚动条不随着层级①往上滚。滚动条的逻辑关...
水平自定义滚动条原理分析【1】
weixin_34209406的博客
09-05 141
2019独角兽企业重金招聘Python工程师标准>>> ...
父子元素滚动条问题
u010622242的博客
08-08 1641
问题现象：页面和div都有竖向滚动条，鼠标放在div，滚动div元素到底部后继续滚动，页面会滚动。 要求：div滚到底部后，如果再滚动鼠标，不要让页面滚动。 代码：增加扩展属性 //滚动条扩展 $.fn.scrollUnique = function () { return $(this).each(function () { var eventType = 'mo...
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元素偏移量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 元素的尺寸和偏移属性
dark_cy的博客
12-20 348
clientWidth、clientHeight 等
Dom中偏移父节点及偏移位置
Always-Learning
01-14 496
获取元素的偏移父节点 元素的偏移位置指的是相对于最近定位的父节点，如果没有定位的父节点一直往上找，直到找到body元素。 获取元素的水平和垂直偏移位置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值