Javascript原生获取dom元素宽、高

最新推荐文章于 2024-04-11 16:16:12 发布
最新推荐文章于 2024-04-11 16:16:12 发布
阅读量3.5k 收藏 4
点赞数
分类专栏： JavaScript 文章标签： JavaScript dom 宽度 高度 body
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/idomyway/article/details/84943908
版权

获取网页窗体方法

    网页可见区域宽： document.body.clientWidth
    网页可见区域高： document.body.clientHeight
    网页可见区域宽： document.body.offsetWidth (包括边线的宽)
    网页可见区域高： document.body.offsetHeight (包括边线的高)
    网页正文全文宽： document.body.scrollWidth
    网页正文全文高： document.body.scrollHeight
    网页被滑去的高： document.body.scrollTop
    网页被滑去的左： document.body.scrollLeft

获取dom元素的宽高：

    元素的实际高度：document.getElementById(“div”).offsetHeight
    元素的实际宽度：document.getElementById(“div”).offsetWidth
    元素的实际距离左边界的距离：document.getElementById(“div”).offsetLeft
    元素的实际距离上边界的距离：document.getElementById(“div”).offsetTop

三者区分

  • clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小）
  • scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）
  • offsetHeight: 偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距
idomyway
关注
专栏目录
js中获取DOM元素大小各属性
weixin_45805570的博客
04-19 1944
题记 写这篇文章的背景还要从一道某大厂的笔试题说起,话不多说直接上题 <!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
原生JS获取DOM元素节点的方法总结
traceur0529的博客
07-11 2390
前言（日常废话） 本篇文章记录了本人所知道的用原生JS来获取到DOM元素节点的几种办法，做个记录，加深记忆，方便以后复习。 正文 本文所做演示基于下面的HTML结构： 本文内容通过个人理解的分类进行归纳总结，大致的目录骨架如下： 目录 一、通过document顶层方法获取 1、document获取html，head，body标签 1.1、获取html标签 1.2、获取head标签 1.3、获取body标签 2、getElementBy系列获取 2.1、通过ID获取 2.2、通过类名获取 2.
原生js如何获取宽高
YaoDeBiAn的博客
10-25 1396
foreword（前言） 最近项目中需要获取 dom 元素的尺寸，所以借此对比分析一下 js 所有获取尺寸的方法，以及相关的 dom 定位方式。 JS 尺寸、定位都有哪些获取方式呢 JS 尺寸获取方法： clientWidth & clientHeight offsetWidth & offsetHeight scrollWidth & scrollHeight getComputedStyle ...
js获取dom元素宽高的方法
天上白玉京，十二楼五城，仙人抚我顶，结发授长生
04-27 2039
这种⽅法，⼀般⽤于计算元素的绝对位置，根据视窗左上⻆的点来算的。这种⽅法，也是有⼀定局限性，不过我们三种常⽤css样式都能获取。这种⽅法，有⼀定局限性，只能取。
原生JS获取元素宽高实践详解
weixin_34206899的博客
10-03 238
开篇的话 任何不是亲身实践中求得的知识，都不是属于你的。 任何求得的知识不去时常温习运用，也不是属于你的。 记录由来 在做个上拉广告功能中遇到了一个“理所当然”觉得对的用法，慢慢才排查出是获取元素高度那里出了问题，这个问题记忆在书上或视频中看到过，许久没用，用的时候就想当然了。遂决定深入剖析用法，增加记忆，记录发表出来，也能给各位前端同行、求学者增加印象。 出错之处 秉承结构、样式、行为分离的宗...
JS原生DOM操作 - 获得元素/网页大小/元素宽高
最新发布
cherry__yu的博客
04-11 2140
它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。scrollHeight和scrollWidth属性提供了元素内容的整体宽度和高度，指包括滚动条在内的视觉面积（包括因溢出而未显示在屏幕上的部分）。每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。
原生javascript实现获取指定元素下所有后代元素的方法
10-25
调用对象通常是特定的DOM元素，该元素的后代将被检索。 例如，在提供的代码实例如下中，`document.getElementById("box")` 首先获取id为"box"的元素，然后`obox.getElementsByTagName("*")`调用返回一个HTML集合，...
基于javascript原生判断DOM是否加载完毕
10-14
另外，在某些情况下，如果脚本文件在DOM加载前被加载并执行，可能会遇到一些额外的问题，因为那时候DOM元素可能还没有准备好。因此，在编写JavaScript代码时，需要注意脚本文件的加载位置，最好将相关脚本文件放置在...
Vue获取DOM元素样式和样式更改示例
08-31
本文将详细介绍如何在Vue中获取DOM元素的样式以及如何更改这些样式。 首先，需要了解Vue中常见的获取和操作DOM的方式。在Vue组件中，通常不推荐直接使用原生JavaScript的document对象来操作DOM，因为这样做可能会...
原生javascript获取元素样式
10-24
在Web开发中，获取和设置DOM元素的样式是十分常见的需求。本文将介绍如何使用原生JavaScript来获取元素的样式，特别是如何获取元素上应用的所有CSS属性值。这里包含了使用`ele.style`属性、`getComputedStyle()`方法...
JS中DOM元素获取的宽和高的方法小结
不想写代码的一天
05-28 2万+
网页可见区域宽： document.body.clientWidth （可变） 网页可见区域高： document.body.clientHeight （可变） 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scro...
获取dom的宽/高
weixin_68447550的博客
11-14 607
获取dom的宽/高
JS获取dom元素高度和宽度的方法
weixin_69667057的博客
03-12 904
元素的实际高度：document.getElementById("div").offsetHeight元素的实际宽度：document.getElementById("div").offsetWidth元素的实际距离左边界的距离：document.getElementById("div").offsetLeft元素的实际距离上边界的距离：document.getElementById("div").offsetTop。
2020-10-07 获得dom元素的宽度（高度）
又一个四季在轮回
10-07 232
获得dom元素的宽度（高度） <style> .han { width: 100px; height: 120px; } </style> <body> <div class="han"></div> </body> 如果dom为内联样式 dom.style.wdith/height dom.getBoundingClientRect().width/heig.
js中获取dom元素高度
热门推荐
韦_恩的博客
05-18 2万+
目录 1.dom元素的宽高 2.鼠标事件中的常用高度宽度： 3. 总结： 4.参考博客： 1.dom元素的宽高 javascript中获取dom元素高度和宽度的方法如下： 网页可视区域宽： document.body.clientWidth 网页可视区域高： document.body.clientHeight网页可视区域宽： document.body.offsetWidth (包括边线的宽)网页可视区域高： document.body.offsetHeight (包括边线的高) 网页正文全
在Vue中获取DOM元素的实际宽高
天问博客-专注于大前端技术
07-19 1万+
最近使用 D3.js 开发可视化图表，因为移动端做了 rem 适配，所以需要动态计算获取图表容器的宽高，其中涉及到一些原生DOM API的使用，避免遗忘这里总结一下。
day35 DOM操作
weixin_46311092的博客
05-17 200
DOM概念 事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。 DOM又称为文档树模型 文档：一个网页可以称为文档 节点：网页中的所有内容都是节点（标签、属性、文本、注释等） 元素：网页中的标签 属性：标签(元素)的属性 获取元素的方式 1、根据id获取元素 var div1 = document.getElementById("box1"); 2、通过类名获取元素 var p1Arr = document.getEl
Js 精确获取Dom元素宽度/高度
飞扬_柳絮的专栏
08-29 2655
css像素解析： 四舍五入解析的浏览器：IE8、IE9、Chrome、Firefox 直接取整解析的浏览器：IE7、Safari 获取元素精确的宽度/高度(带小数位像素) 问题：document.getElementById(id).style.width 只能获取元素行内样式的值 解决办法一： window.getComputedStyle(element)...
js 获取dom的高度和宽度，可滚动宽高距离，当前滚动位置
PrimaryColor
02-22 6143
dom节点属性： clientWidth（不推荐）：dom节点可视区域的宽度。（可滚动距离不算在内哈。） clientHeight（不推荐）：dom节点可视区域的高度。（可滚动距离不算在内哈。） offsetWidth：dom节点可视区域的宽度，包含边框、内边距。（可滚动距离不算在内哈。） offsetHeight：dom节点可视区域的宽度，包含边框、内边距。（可滚动距离不算在内哈。） scrollWidth：dom节点的内容可滚动距离，横向滚动距离。（注意：overflow:hidden时也能获
vue3获取原生dom元素
05-10
在Vue 3中，可以使用`ref`来获取原生DOM元素。具体步骤如下： 1. 在`setup`函数中使用`ref`来创建一个引用： ```javascript import {ref} from 'vue'; export default { setup() { const myElement = ref(null); return { myElement }; } } ``` 2. 在模板中使用`ref`来绑定这个引用并获取原生DOM元素： ```html <template> <div ref="myElement">这是一个原生DOM元素</div> </template> ``` 3. 可以在组件的`methods`或`setup`函数中使用这个引用来访问原生DOM元素的属性和方法： ```javascript import {ref} from 'vue'; export default { setup() { const myElement = ref(null); const handleClick = () => { myElement.value.innerHTML = '点击后修改了DOM元素的内容'; }; return { myElement, handleClick }; } } ``` ```html <template> <div ref="myElement" @click="handleClick">这是一个原生DOM元素</div> </template> ``` 在上面的例子中，我们通过`ref`来获取了一个原生DOM元素，并在`handleClick`函数中修改了它的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值