js获取页面及个元素高度、宽度

最新推荐文章于 2024-04-11 16:16:12 发布
最新推荐文章于 2024-04-11 16:16:12 发布
阅读量107 收藏
点赞数
原文链接：http://www.cnblogs.com/minghualiyan/p/4663485.html
版权
本文详细介绍了网页中各种尺寸属性的使用方法，包括网页可见区域的宽高、正文的宽高、元素的尺寸及位置，以及如何获取网页被卷去的高和左等关键信息。同时，还探讨了scrollTop和scrollLeft属性的应用场景。
摘要由CSDN通过智能技术生成

网页可见区域宽： document.body.clientWidth; 

网页可见区域高： document.body.clientHeight; 

网页可见区域宽： document.body.offsetWidth (包括边线和滚动条的宽); 
网页可见区域高： document.body.offsetHeight (包括边线的宽); 
网页正文全文宽： document.body.scrollWidth; 
网页正文全文高： document.body.scrollHeight; 
网页被卷去的高(ff)：document.body.scrollTop; 
网页被卷去的高(ie): document.documentElement.scrollTop; 
网页被卷去的左：document.body.scrollLeft; 
网页正文部分上：window.screenTop; 
网页正文部分左：window.screenLeft; 
某个元素的宽度： obj.offsetWidth;
某个元素的高度：obj.offsetHeight;
某个元素的上边界到body最顶部的距离：obj.offsetTop;（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：obj.offsetLeft;（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量 ：obj.offsetTop（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offsetLeft（在元素的包含元素含滚动条的情况下）
 
scrollTop, scrollLeft 设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，例如，元素的 CSS overflow 属性设置为 auto 的时候，这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。注意，这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性

转载于:https://www.cnblogs.com/minghualiyan/p/4663485.html

denghan4400
关注
获取页面元素实际宽高的属性的使用
08-21
一些关于获取页面元素实际宽高的属性的使用
js获取页面及个元素高度、宽度的代码
10-22
在进行前端开发时，经常需要获取页面或特定元素的尺寸信息，比如页面的可视区域大小、元素的宽高以及元素的位置等，以实现更加丰富的页面交互和布局控制。JavaScript 为我们提供了丰富的属性和方法来获取这些尺寸...
jQuery获取页面及元素高度、宽度
雨后春笋_aspx专栏
06-19 725
获取浏览器显示区域（可视区域）的高度 ：    $(window).height();    获取浏览器显示区域（可视区域）的宽度 ： $(window).width();    获取页面的文档高度    $(document).height();    获取页面的文档宽度 ： $(document).width();  浏览器当前窗口文档body的高度：   $(documen
js获取元素高度
m0_56695398的博客
12-21 2046
获取的元素高度包括内容、padding、border，不包括margin，getBoundingClientRect( )方法可以获取元素的位置和大小信息，包括left、right、top、bottom、width、height。获取的元素高度是内容的真实高度，即整个内容在没有滚动条的情况下所占据的高度包括被隐藏的部分。获取的元素高度包括内容、padding，不包括border、margin。获取元素的计算样式，包括高度、宽度。获取元素相对于其父元素顶部的距离。
jQuery获取页面及个元素高度、宽度的总结——超实用
10-23
本文将详细介绍使用jQuery获取页面和元素高度、宽度的各种方法，以及它们的使用场景和注意事项。 首先，获取浏览器窗口可视区域的尺寸是常用的操作。这可以帮助我们了解浏览器提供的可视空间，以便在页面布局中做出...
js获取Html元素的实际宽度高度的方法
10-22
在Web开发中，经常需要获取HTML元素的实际宽度和高度，这些尺寸信息对于页面布局和响应式设计至关重要。文档中提供的方法是使用JavaScript（简称js）来实现这一功能。为了深入理解和掌握这些知识点，我们需要从几个...
JS获取元素的高度
zuo_zuo_blog的博客
11-16 8395
1.offsetHeight var div = document.getElementById('demo'); console.log(div.offsetHeight); // 244 注意这里返回的值不带有单位 offsetHeight的值包括元素内容+内边距+边框 offsetHeight = content + padding + border = 200 + 20 * 2 + 2 * 2 = 244 2、clientHeight var div = document.getElementBy
js中如何获取元素的高度
热门推荐
勿忘初心的博客
11-18 3万+
一、碎碎念~前言 我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。 对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用，至少对创造一些创意新颖的新技术拓宽了思路。 jQuery
JS：获取元素宽度高度
喜欢讨论、分享
06-28 1742
第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。     小结，因为id.offsetWidth和id.offsetHeight无视
js 获取元素的高度或者宽度。
非知名程序员的博客
06-25 1150
1、在一些我们设置了宽度高度的元素中，我们可以用                  元素宽度  =  元素.style.width;                  元素的高度= 元素.style.height; 2、但是在一些未设置高度宽度的元素中，仅靠子元素撑开高度宽度的元素，就不会被获取到，就需要这样获取 元素宽度  =  元素.clientWidth;
JS原生DOM操作 - 获得元素/网页大小/元素宽高
最新发布
cherry__yu的博客
04-11 2349
它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。scrollHeight和scrollWidth属性提供了元素内容的整体宽度和高度，指包括滚动条在内的视觉面积（包括因溢出而未显示在屏幕上的部分）。每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。
Vue 之获取元素高度
gyueh的博客
09-17 1528
html部分如下 <div ref="enterBox"></div> js部分代码如下： created() { // 获取可视区域的宽度和高度 this.getEnterBoxStyle() }, methods: { getEnterBoxStyle() { // 页面渲染完成后的回调 this.$nextTick(() => { const viewsWidth = window.getCompu
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
chelen_jak的专栏
10-29 764
原文出处：https://www.imooc.com/article/17571 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下： clientHeight和offsetHeight属...
JavaScript获取页面与元素尺寸函数详解
"这篇文章主要汇总了JavaScript中用于获取页面元素及窗口高度和宽度的各种函数，包括获取视窗大小、元素自身大小以及可见区域尺寸的方法。通过示例代码展示了如何操作DOM元素来获取这些信息，适合JavaScript初学者和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值