js获取元素高度、宽度

最新推荐文章于 2024-04-11 16:16:12 发布
最新推荐文章于 2024-04-11 16:16:12 发布
阅读量928 收藏
点赞数
分类专栏： js 文章标签： javascript 浏览器 html
网页可见区域宽： 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> 标记的滚动量。这是非标准的但却得到很好支持的属性


转自：  http://blog.sina.com.cn/s/blog_51048da70101djp5.html
rwerwrqqwr
关注
专栏目录
js 获取元素位置和大小_js 位置_Js宽度高度（详解）
天马3798
12-10 3645
如obj.style.top、obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px)，同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。该属性指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度，即滚动条宽高度。
js 获取浏览器高度和宽度值(多浏览器)
10-29
在 Web 开发中，获取浏览器的高度和宽度值是非常重要的，因为它能够帮助我们更好地布局页面元素和实现响应式设计。然而，浏览器的高度和宽度值获取方法却因浏览器的不同而有所区别。在本文中，我们将讨论如何在不同...
js获取Html元素的实际宽度高度的方法
11-23
第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中，比如style=”width:120px;”，这中情况通过上述2个方法都能拿到宽度。 小结，因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。 现 在的前端制作很少直接把样式写style里了，都是写
JS获取元素的高度
zuo_zuo_blog的博客
11-16 8350
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获取元素高度
m0_56695398的博客
12-21 1670
获取的元素高度包括内容、padding、border，不包括margin，getBoundingClientRect( )方法可以获取元素的位置和大小信息，包括left、right、top、bottom、width、height。获取的元素高度是内容的真实高度，即整个内容在没有滚动条的情况下所占据的高度包括被隐藏的部分。获取的元素高度包括内容、padding，不包括border、margin。获取元素的计算样式，包括高度、宽度。获取元素相对于其父元素顶部的距离。
js获取元素的高度
热门推荐
hzjanger的博客
06-28 3万+
获取元素的高度 style.height 包括元素的滚动条,不包括边框，值为string，带单位px 使用style.height最坑的就是height必须使用行内样式，使用内联式和外嵌式是不行的 height在<style>标签中设置，使用style.height是获取不到值的 <!DOCTYPE html> <html lang="en"> <...
javascript获取隐藏元素(display:none)的高度和宽度的方法
10-25
2. 通过JavaScript的计算样式方法，如obj.currentStyle或document.defaultView.getComputedStyle()，来获取元素的宽度和高度。 3. 获取完尺寸后，需要将元素的display属性和visibility属性恢复原样，以避免元素位置...
js中如何获取元素的高度
勿忘初心的博客
11-18 3万+
一、碎碎念~前言 我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。 对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用，至少对创造一些创意新颖的新技术拓宽了思路。 jQuery
原生JS获取元素的位置与尺寸实现方法
11-27
1、内高度、内宽度： 内边距 + 内容框 clientWidth clientHeight 2、外高度，外宽度： 边框 + 内边距 + 内容框 offsetWidth offsetHeight 3、上边框、左边框 clientTop clientLeft 4、元素的大小及其相对于视口的位置 getBoundingClientRect() //x\y:元素的左上角和父元素左上角的距离 //width/height:边框 + 内边距 + 内容框 //top:元素的上边界和父元素上边界的距离 //left:元素的左边界和父元素左边界的距离 //right:元素的右边界和父元素的左边界的距离 //bo
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
10-26
本篇文章主要介绍了JS获取屏幕,浏览器窗口大小,网页高度宽度的实现代码。需要的朋友可以过来参考下，希望对大家有所帮助
js 宽和高
deng28144的博客
04-19 112
1 网页可见区域宽： document.body.clientWidth; 2 网页可见区域高： document.body.clientHeight; 3 网页可见区域宽： document.body.offsetWidth (包括边线和滚动条的宽); 4 网页可见区域高： document.body.offsetHeight (包括边线的宽); 5 网页正文全文...
js 获取页面宽度
weixin_33851429的博客
03-03 75
特例： 当$(window).width()无效时 /* 出现时机： iframe内嵌子页面在加载过程中取不到$(window).width()，非必现，机率大概1 / 20 */ 可用以下方式获取屏幕宽度： window.screen.width /= window.devicePixelRatio...
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
chelen_jak的专栏
10-29 741
原文出处：https://www.imooc.com/article/17571 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下： clientHeight和offsetHeight属...
JS原生DOM操作 - 获得元素/网页大小/元素宽高
最新发布
cherry__yu的博客
04-11 2140
它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。scrollHeight和scrollWidth属性提供了元素内容的整体宽度和高度，指包括滚动条在内的视觉面积（包括因溢出而未显示在屏幕上的部分）。每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。
Js获取页面的各种宽高与距离
weixin_43743804的博客
04-04 670
1、screen系列 screen.width:      屏幕的宽度 screen.height:     屏幕的高度 2、style系列（必须是行内设置的样式才有效） element.style.width:     当前对象的宽度 element.style.height:    当前对象的高度 &...
js获取页面的宽度
dengyujin5391的博客
09-27 3219
JS如何获取屏幕浏览器网页高度宽度网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scro...
JS获取网页宽高方法集合
aidenliu的专栏
07-09 4244
JS获取网页宽高等方法的集合：document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高document.body.offsetWidth - 网页可见区域宽，包括边线和滚动条的宽document.body.offsetHeight - 网页可见区域高，包括边线和滚动条的高document.body.scrollWidth - 网页总宽document.body.scrollHeight - 网页总高document.bod
JavaScript获取页面与元素尺寸函数详解
"这篇文章主要汇总了JavaScript中用于获取页面元素及窗口高度和宽度的各种函数，包括获取视窗大小、元素自身大小以及可见区域尺寸的方法。通过示例代码展示了如何操作DOM元素来获取这些信息，适合JavaScript初学者和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值