[Js++开发历程] 难搞的DOM元素的Rect

最新推荐文章于 2023-09-07 14:07:27 发布
最新推荐文章于 2023-09-07 14:07:27 发布 · 145 阅读 · 0

本文深入解析DOM元素的Rect属性，解释offset和client的区别，详细阐述滚动条、边框、padding如何影响元素尺寸，并通过getBoundingClientRect方法获取元素精确位置。

1.6 难搞的DOM元素的Rect

 

1.offset 和 client 区别

可以根据以下来总结：

A.滚动条是在对象里面产生，

B.边框是在对象的外面产生

C.padding是将对象的面积扩大

 

因此，滚动条不影响offsetWidth,但影响clientWidth

边框影响offsetWidth,但不影响clientWidth

padding同时影响offsetWidth和clientWidth

 

2.getBoundingClientRect

获取元素相对于页面视图左上角的位置区域。只要加上文档滚动的距离，就可以精确元素的偏移坐标了

Javascript的新领域——动态图片处理之SVG
JavaScript
10-17 1万+
近三年前的一篇旧文，虽然在浏览器和相关技术标准方面有过时之处，但总体上对概念的理解、开发的思路和代码样例仍然有参考价值。背景当Javascript被Netscape公司发明出来时，它被用来做一些琐细的事情，比如校验表单、计算日期、提示用户；随着Web的迅速发展，这种轻巧而灵活的语言被委以越来越多的任务，动态地修改页面内容，一致地处理事件，甚至无刷新地和服务器交互。然而，与传统的客户端编程相比，Ja
一文教你如何准确判断元素是否在可视区域！
最新发布
CRMEB小程序商城的博客
12-06 1691
所以我们可以根据DOMRect的中的各个属性来判断dom是否在可视区域内。
总结js常用的dom操作（js的dom操作API）
Time_Flies_lei的博客
04-30 494
前言 很多同学用惯了jquery操作dom，让他们用js操作的时候，常常力不从心，本文总结了常用的js的dom操作方法，供大家翻阅！其实说起js操作dom，我很久很久之前有篇文章，jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法，但是不是很系统。不能说是API，今天来系统总结一下！ 节点查找API document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个； document.getElementsByClassNa
DOMRect对象
01-22 984
查看HTML元素在可视区域中的位置可以用DOMRect这个对象。 document.querySelector("#div1").getBoundingClientRect(); 返回的是 ClientRect或者DOMRect对象（其实只是改了名字而已，DOMRect为目前最新的名称） ClientRect中的四个属性（left,top,right,bottom)可以构成矩形盒子...
html里rect函数,HTML DOMRect fromRect用法及代码示例
weixin_30324103的博客
06-26 746
在Web API中，有一个DOMRect接口，该接口具有属性fromRect()，该属性创建具有位置和尺寸的DOMRectReadOnly对象。用法:var domRect = DOMRectReadOnly.fromRect(DOMRect object)返回值：It returns an instance of DOMRect例：使用fromRect。DOMRect fromRect prop...
JavaScript之DOM的位置、属性、方法
努力学习前端的阿猪
02-04 3618
文章目录前言一、DOM的位置1.1、`getBoundingClientRect()`注意1.2、`element.scrollLeft && element.scrollTop`1.3、`offsetParent && offsetLeft && offsetTop`-元素自身相关的属性（开发中不常用到）1.4、`element.clientTop && element.clientLeft` 前言 前段时间的开发工作涉及
D3.js v4版本完整API与源码实例演示
D3.js 是一个基于数据驱动文档的 JavaScript 库，广泛应用于 Web 前端开发中的数据可视化领域。其 v4 版本是 D3 发展历程中一次重大的架构升级，标志着该库从早期版本向模块化、可扩展性和更高灵活性方向的重大转变...
初识D3.js数据可视化库
D3.js数据可视化库是一种基于JavaScript的开源库，可以帮助开发者轻松地创建各种数据可视化图表。在数据处理和DOM操作方面提供了强大的功能，使得用户可以利用数据驱动文档的方法，创建出具有交互性的可视化效果。 ...
HTML版动态网页VML图形绘制教程
更重要的是，由于VML元素本质上是DOM节点，因此可以通过JavaScript对其进行动态操控。比如，监听鼠标事件后实时改变某个椭圆的位置，或者根据数据生成柱状图、饼图等统计图表，这在当时属于较为先进的前端可视化技术...
【核心关键】：JavaScript对现代Web应用的不可或缺性
JavaScript在Web开发中的地位 ## 1.1 Web开发的先驱者 在Web开发的世界里，JavaScript犹如一颗璀璨的星，照亮了网页交互的夜空。自从1995年被引入浏览器，它就成为了构建动态网页不可或缺的核心技术之一。...
html dom top,HTML DOMRect top用法及代码示例
weixin_36415235的博客
06-20 443
在Web API中，有一个DOMRect接口，该接口具有一个属性top，该属性使我们在DOMRect对象的顶部。它返回y坐标值，或者如果高度为负，则返回y +高度。用法:var recX = DOMRect.top;返回类型：Double value范例1：当高度为正时DOMRect top propertyGeeksForGeeksDOMRect top propertyGet topfunct...
093_Element.getBoundingClientRect()方法和DOMRect对象
aihiao的专栏
11-18 1255
1. Element.getBoundingClientRect() 1.1. Element.getBoundingClientRect()方法返回值是一个DOMRect对象, 对象拥有left, top, right, bottom, x, y, width和height这几个以像素为单位的只读属性, 用于描述整个边框。除了width和height以外的属性是相对于视图窗口的左上角来计算的。 2. DOMRect对象 2.1. 一个DOMRect代表一个矩形。DOMRect从其父类DOMRectR
笔记：dom元素各种宽度和高度，getBoundingClientRect，clientWidth,clientHeight,offsetWidth,offsetHeight
YanHSama的博客
04-25 3371
dom.clientwidth
DOM元素获取位置信息各类方法图示
叹之
03-23 1434
getBoundingClientRect 用法 domRect = element.getBoundingClientRect(); 图解 The returned value is a DOMRect object which is the smallest rectangle which contains the entire element, including its padding and border-width. 返回值是一个DOMRect对象，该对象是包含这个元素的最小矩形，
js中getBoundingClientRect()方法详解
m0_59075169的博客
05-10 7338
js中getBoundingClientRect()方法详解
Js 获取元素Rect信息
qq_26318597的博客
09-07 758
js 获取元素Rect信息
DOM基础笔记——getBoundingClientRect() / getClientRects()
Yomuki的博客
12-12 497
getBoundingClientRect() 返回元素的大小及其相对于视口的位置。 返回的是DOMRect对象. width / height content-box : width + padding + border border-box : width IE9+ x 左边到视口的距离 IE不支持 y 上边到视口的距离 IE不支持 top 上边到视口的距离 bottom 下边到视口的距离 ri...
5个实用的JavaScript原生API
Admans的专栏
04-21 358
window.getComputedStyle() 方法返回一个 CSSStyleDeclaration 对象，其类型与样式属性相同，其中包含元素的计算样式。要从剪贴板中读取文本，请调用 navigator.clipboard.readText() 并等待返回的 Promise 进行解析。以上就是我今天想与你分享的5个关于JavaScript原生的API的知识内容，希望这些内容对你有所帮助。() 方法返回一个 DOMRect 对象，该对象提供有关元素大小及其相对于视口的位置的信息。带来意想不到的便利。
使用observer-rect观察DOM元素矩形区域
在Web开发中，DOM元素的矩形Rect通常是指一个元素的位置（position）和尺寸（dimensions）信息，这些信息可以用来精确地描述元素在页面上的位置和大小。这些信息包括： - `top`：元素距离其最近的定位祖先元素顶部...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值