获取DOM尺寸

最新推荐文章于 2025-02-09 14:33:22 发布
最新推荐文章于 2025-02-09 14:33:22 发布
阅读量191 收藏
点赞数
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chenlunju/article/details/115422296
版权

视口的尺寸

// IE8 不兼容
window.innerWidth / window.innerHeight

// IE8 以下 标准模式 document.compatMode == "CSS1Compat"
document.documentElement.clientWidth 
document.documentElement.clientHeight

// IE8 以下 怪异模式 document.compatMode == "BackCompat"
document.body.clientWidth 
document.body.clientHeight

 

元素的几何尺寸 

div.getBoundingClientRect()  // 返回的是对象，border盒子宽高


div.scrollWidth / div.scrollHeight  // 1 元素内容的高度,包括溢出的不可见内容

div.offsetWidth / div.offsetHeight  // 2 返回的是数字，border盒子宽高

div.clientWidth / div.clientHeight  // 3 返回的是数字，padding盒子宽高，不含滚动条

div.offsetLeft / div.offsetTop  // 对于无定位祖先元素，相对于文档的坐标；对于有定位的祖先元素，相对于最近有定位的祖先元素坐标

获取样式

dom.style //  获取行内样式 可读，可写 CSSStyleDeclaration

window.getComputedStyle(dom, null) // 只读，IE8 IE8以下不兼容 获取显示属性 CSSStyleDeclaration

dom.currentStyle  // IE8 IE8以下 使用

 

查看滚动条的距离

// IE8 以及 IE8以下不兼容
window.pageXOffset/window.pageYOffset  

window.scrollX/window.scrollY

// 兼容写法
document.body.scrollLeft + document.documentElement.scrollLeft
document.body.scrollTop + document.documentElement.scrollTop

 

滚动条滚动

window上的三个方法

scroll(0, 100) / scrollTo(0, 100)
scrollBy(0, 100)  // 增量

 

 

 

chenlunju
关注
如何正确获取 DOM 元素的大小
MggnHaskell的博客
09-22 812
getBoundingClientRect() 是 DOM 元素对象的方法，返回一个 DOMRect 对象，包含了元素的位置和大小信息。在开始之前，我们需要明确一点：DOM 元素的大小包括宽度（width）、高度（height）以及它们的盒模型属性，如内边距（padding）、边框（border）和外边距（margin）。以上是几种常用的方法来获取 DOM 元素的大小。DOM 元素对象具有 offsetWidth 和 offsetHeight 属性，它们表示元素的可见宽度和高度，包括内边距和边框。
JS中 DOM尺寸获取的一些方法
weixin_46421045的博客
06-10 353
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../../utils.js"></script&g
DOM元素尺寸获取
joey_hao的博客
06-28 316
offset 获取盒模型的尺寸，可视宽高 包含边框 <div> <p></p> </div> <script> var box = document.querySelector('div'); var p = document.querySelector('p'); // 盒模型的宽度 包含边框 console.log(box.offsetWidth);
DOM元素尺寸
qq_38211443的博客
10-27 259
1）偏移尺寸 ： 元素在屏幕上占用的所有视觉空间（包括内边距，滚动条，和边框【不包含外边距】 offsetHeight offsetLeft offsetTop offsetWidth 2）客户端尺寸： 元素内容及其内边距所占用的空间。 cilentWidth cilentHeight 3) 滚动尺寸 scrollHeight scrollLeft scrollTop scroolWidth scrollWidth和scrollHeight可以用来确定元素内容的实
JavaScript中 获取DOM元素尺寸和位置
明天也要努力的博客
02-20 4221
1. 获取元素的 css 大小 1.1 获取元素的行内样式 <script> function boxInfo(){ let box = document.getElementById('box'); let w = box.style.width; let h = box.style.height; console.log(w,h) // 700px 800px } </script> <body> <div id="
DOM获取元素大小
One And Only的博客
03-31 396
1.style获取行内的元素大小 var box = document.getElementById('box'); alert(typeof box.style.width); alert(box.style.height);2.获取计算后的CSS大小，如果没有设置，非IE会获取默认大小，IE会理解为0 var style = window.getComputedS
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
本文将深入探讨如何利用JavaScript获取DOM元素的位置和尺寸，并解释相关属性。 首先，我们要了解几个关键的属性： 1. `offsetWidth` 和 `offsetHeight`：这两个属性返回元素的完整外尺寸，包括内容、内边距和边框...
在vue中获取dom元素内容的方法
08-30
在实际开发中，使用 ref 属性获取 DOM 元素内容可以解决很多问题，例如，获取某个元素的尺寸、位置、样式等信息，或者对某个元素进行操作，例如，动态地添加或删除元素等等。 此外，使用 ref 属性获取 DOM 元素内容...
Vue获取DOM元素样式和样式更改示例
08-31
本文将详细介绍如何在Vue中获取DOM元素的样式以及如何更改这些样式。 首先，需要了解Vue中常见的获取和操作DOM的方式。在Vue组件中，通常不推荐直接使用原生JavaScript的document对象来操作DOM，因为这样做可能会...
解决vue项目获取dom元素宽高总是不准确问题
11-20
原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕； 解决方法：利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后...
获取窗口属性，获取dom尺寸
admin_djp的博客
09-13 299
查看滚动条的距离 window.pageXOffset/pageYOffset ie8及ie8以下不兼容 document.body/document.Element.scrollLeft/scrollTop 兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值 var x = window.pageXOffset; var y = window.pageYOffset; console.log("pageXOffset:" + x,"pageYOf
获取窗口属性，获取DOM元素尺寸
m0_54581080的博客
07-06 129
查看滚动条的滚动距离 window.pageXOffset//x轴 window.pageYOffset//y轴 查看可视窗口的尺寸 window.innerWidth/innerHeight 标准模式，怪异模式 就是文档第一行<!DOCtypehtml>,去掉的话就是怪异模式了 怎么分辨文档是什么模式？ document.comp...
js中获取DOM元素大小各属性
weixin_45805570的博客
04-19 2000
题记 写这篇文章的背景还要从一道某大厂的笔试题说起,话不多说直接上题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial
BOM、DOM、CSS尺寸获取
lihefei_coder的博客
02-20 757
clientWidth：获取元素的宽度（包括内边距，减去滚动条） clientHeight：获取元素的高度（包括内边距，减去滚动条）offsetWidth：获取元素的宽度（包括边框、内边距、滚动条） offsetHeight：获取元素的高度（包括边框、内边距、滚动条）scrollWidth：获取元素宽度（包括内边距，减去滚动条，包括超出内容的宽度） scrollHeight：获取元素高度（包括
js基础之DOM尺寸及位置
时光清浅处，一步一安然
08-11 866
js基础之DOM尺寸及位置 一、DOM尺寸 以下表格属性中，前三种属性都是只读属性 属性 描述 box.style.width，box.style.height 只能获取到内联style属性的CSS样式中的宽和高，如果有，获取。如果没有，则返回空 getStyle(box, “width”)，getStyle(box, “width”) 通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。如果本身设置大小，它会返回元素的大小，如果本身没有设置，非IE浏
JS篇-DOM上的尺寸及位置
Fhdnkxldnbx的博客
02-09 1241
相信当家对DOM元素上的尺寸及位置属性一定不陌生，常见的clientHeight、offsetHeight等属性在日常开发中会经常用到，但也会常常忘记各个属性具体的边界情况。本文整理了DOM元素上的尺寸及位置属性，方便大家日后在使用过程中能快速回想起各个属性的边界。
DOM元素的尺寸和位置
youhebuke225的博客
05-25 429
目录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尺寸与位置：clientWidth、offsetWidth、scrollWidth、getBoundingClientRect() 一网打尽
编码行者的博客
12-20 1487
获取元素内容区域的宽度，不包括边框和滚动条。：获取元素相对于其父元素的偏移宽度，包括边框、内边距和滚动条。：获取元素内容的总宽度，包括溢出的部分。：获取元素相对于视口的位置和大小信息。在实际应用中，根据具体的需求选择合适的属性或方法来获取元素的尺寸和位置信息，可以更灵活地处理 DOM 操作。
uniapp中获取domclass
最新发布
04-02
### 在 UniApp 中获取 DOM 元素的 Class 属性 在 UniApp 开发环境中，可以通过 `uni.createSelectorQuery()` 方法来实现对 DOM 元素的选择和属性读取。具体到获取 DOM 元素的 `class` 属性，可以利用 `boundingClientRect` 或者直接通过 `fields` 参数指定需要查询的内容。 以下是具体的实现方式： #### 实现代码示例 ```javascript // 假设目标元素具有特定的 class 名称为 'domItem' export default { methods: { getClassOfElement() { const query = uni.createSelectorQuery().in(this); // 创建选择器查询对象 query.select('.domItem').fields({ // 选择目标元素并定义要获取的字段 dataset: true, // 是否获取 data-* 属性 size: false, // 不需要尺寸信息 rect: false, // 不需要位置信息 scrollOffset: false, // 不需要滚动偏移量 properties: ['class'] // 明确指明需要获取的属性列表 }, (res) => { console.log('Class of the element:', res.class); // 输出目标元素的 class 属性 }).exec(); // 执行查询 } }, mounted() { this.getClassOfElement(); // 确保在组件挂载完成后再执行查询 } }; ``` 上述代码展示了如何使用 `uni.createSelectorQuery()` 来获取 `.domItem` 类名下的 DOM 元素的 `class` 属性[^1]。需要注意的是，此方法仅适用于已渲染至页面上的 DOM 结构，并且应在生命周期钩子 `mounted` 后调用以确保 DOM 已经加载完毕。 如果存在动态更新的情况（例如由 Vue 数据驱动的模板），则可能涉及异步渲染问题。此时应结合 `this.$nextTick` 确保操作发生在 DOM 更新之后[^2]。 --- ### 注意事项 - 如果尝试访问未完全渲染或者尚未存在的 DOM 节点，可能会导致查询失败或返回空值。 - 查询时需注意 CSS Selectors 的书写准确性，错误的选择器可能导致无法匹配任何节点。 - 当前 API 支持多种字段选项配置，开发者可根据实际需求调整参数设置。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值