看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight

最新推荐文章于 2023-12-07 17:49:34 发布
最新推荐文章于 2023-12-07 17:49:34 发布
阅读量380 收藏
点赞数
分类专栏： js与前端

 

每次用JS获取页面的高宽时总都是相当的揪心，同一个属性在不同的浏览器或不同的W3C标准下所表示的意思都不尽相同。以下就针对页面的实际高宽和可见区域做个总结，以便大家查阅！


1. 在W3C标准的情况下

W3C标准页面，即在HTML代码头部加入

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

 

在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

 

在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）



2. 在无W3C标准的情况下

即在HTML代码头部无

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

在IE中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

 

在FireFox中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

 

在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）



3. 附录 - 页面高宽的其他相关属性

<script>

var s = '';

s += "\r\n 网页可见区域宽："+ document.body.clientWidth;
s += "\r\n 网页可见区域高："+ document.body.clientHeight;
s += "\r\n 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += "\r\n 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
s += "\r\n 网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n 网页正文全文高："+ document.body.scrollHeight;
s += "\r\n 网页被卷去的高(ff)："+ document.body.scrollTop;
s += "\r\n 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
s += "\r\n 网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n 网页正文部分上："+ window.screenTop;
s += "\r\n 网页正文部分左："+ window.screenLeft;
s += "\r\n 屏幕分辨率的高："+ window.screen.height;
s += "\r\n 屏幕分辨率的宽："+ window.screen.width;
s += "\r\n 屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n 屏幕可用工作区宽度："+ window.screen.availWidth;
s += "\r\n 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += "\r\n 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";

alert(s);

</script>

 

judyge
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
10-15
总之，理解并熟练运用`offsetWidth`、`clientWidth`、`innerWidth`以及相关属性，能帮助开发者更好地操控DOM元素，实现丰富的网页交互功能。在编写JavaScript代码时，根据具体需求选择合适的属性，可以提高代码的...
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）
10-19
} else if (newY + this.offsetHeight > clientHeight) { newY = clientHeight - this.offsetHeight; newScrollTop = Math.min(newScrollTop + newY, document.documentElement.scrollHeight - clientHeight); } ...
JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解
热门推荐
我是张跑跑
01-07 1万+
1. 总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的，因此在本博文中详细的介绍并给出实例。 以上的4个属性是成对出现的，因此下面介绍中也成对的介绍，在实例中为了减少代码量，我直接用的id，实际开发中不推荐。 2. scrollWidth和scrollHeight 2.1 概念 element...
js控制左右滚动距离
好先
07-06 1824
要通过JavaScript控制元素的左右滚动距离，可以使用scrollLeft属性。scrollLeft属性可以获取或设置元素内容在水平方向上滚动的像素值。在上面的示例中，我们首先获取了一个滚动容器元素（例如DIV），然后通过修改scrollLeft属性来控制滚动距离。请将上述代码中的scroll-container替换为你实际使用的滚动容器元素的ID。
秒懂scrollWidth/scrollHeight/scrollLeft/scrollTop（详解）
最新发布
weixin_61597234的博客
12-07 3135
1.scrollWidth：返回元素整体的宽度，包括由于 overflow 溢出而在屏幕上不可见的内容。 2.scrollHeight：返回元素整体的高度，包括由于 overflow 溢出而在屏幕上不可见的内容。 3.scrollLeft：被隐藏在内容区域左方的距离。设置该值可以改变元素的滚动位置 4.scrollTop：被隐藏在内容区域上方的像距离。设置该值可以改变元素的滚动位置
一文看懂js中元素的滚动大小（scrollWidth,scrollHeight,scrollTop,scrollLeft）
sinat_41212418的博客
10-26 1500
滚动大小（scroll dimension） 滚动大小指的是包含滚动内容元素的大小。 以下是与元素滚动内容大小相关的属性： scrollWidth：在没有滚动条的情况下，元素内容的总宽度。 scrollHeight：在没有滚动条的情况下，元素内容的总高度。 scrollTop：被隐藏在内容区域上方的像素数。设置该值可以改变元素的滚动位置。 scrollLeft：被隐藏在内容区域左侧的像素数。设置该值可以改变元素的滚动位置。 接下来就举例讲解一下各个属性是什么意思，在这里使用html元素做
详解clientWidth，scrollWidth，offsetWidth，innerWidth
weixin_45096939的博客
10-26 4109
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。scrollHeight和scrollWidth还可以获取Dom元素中内容实际占用的高度和宽度.scrollLeft后面的值必须是number类型，表示的是滚动左侧隐藏的部分。clientWidth也可以用来获取元素的宽高，不包含元素的border.offset用来获取DOM元素中内容高度和宽度时包括元素的border.window.innerHeight=浏览器窗口的内部高度。
scrollLeft,scrollTop等等详解.pdf
02-23
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括...
scrollLeft,scrollTop等等详解[定义].pdf
10-12
在软件开发中，特别是在Web开发领域，理解和使用`scrollLeft`、`scrollTop`以及相关的DOM元素属性至关重要。这些属性主要用于处理网页元素的滚动位置和尺寸，对于创建动态、响应式的用户界面有着重要的作用。 首先...
js中关于scrollHeight，scrollwidth,scrollLeft,scrollTop的属性使用
m0_56132701的博客
01-06 1964
element.scrollHeight属性返回整个元素的总高度， element.scrollWidth属性返回整个元素的总宽度。如果元素没有发生溢出（没出现滚动条），那么scrollHeight和clientHeight是相等的，scrollWidth属性与clientWidth属性是相等的。element.scrollLeft属性表示元素的水平滚动条向右侧滚动的距离，element.scrollTop属性表示元素的垂直滚动条向下滚动的距离。如果没有出现滚动条，那上面的两个属性值就是0。
scrollwidth和offsetwidth区别
02-08
scrollwidth和offsetwidth区别! 很值得下载看看!资源免费,大家分享!!
根据例子来理解scrollHeight,clientHeight,scrollTop的区别
01-14
包含以下内容： function test(){ var infoHeight = document.getElementById(”info”).scrollHeight; //scrollHeight 为层实际的高度，有实际有多高就多高，与当前网页高度无关。
js：scroll平滑滚动页面或元素到顶部或底部的方案汇总
彭世瑜的博客
07-12 1万+
可能在部分老旧设备上存在兼容性，从网上收集了一个多设备支持的缓冲方案margin : 0;
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 3460
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
从原理上搞懂offsetWidth、scrollWidth、clientWidth以及其他偏移量
wgh295360998的专栏
02-09 3807
1. 影响以上参数主要有哪些内容 笔者在总结这几个内容之前，也翻了很多书，看了很多帖子，始终没有搞清楚这几个内容的逻辑，每次记住了，没过几天就忘了，下次再被问到完全又分不清楚了。 于是又拿起了《Javascript权威指南》这本书，认认真真读了两遍，终于发现了一些规律，下面就给大家总结一下。 其实每个人都很清楚，影响以上几个因素的参数，无非就那么几个：我们拿一个div来举例。主要包括了：padding, border, margin, width(height)，滚动条的距离scroll, 以及滚动到了视口
Html元素的scrollWidth和scrollHeight详解 .
巴萨，足球的艺术
01-29 1万+
上网搜了一下scrollWidth和scrollHeight，大部分都是转帖，也没有具体说清楚，这两个属性值是什么，也没有图。 索性自己测试一下，包含的浏览器有IE 6，IE 7，IE 8，IE 9，Firefox，Chrome，Opera，Safari，顺便把测试的截图也发上来，这样大家看着也明白。 一、scrollWidth 首先，我们先上MSDN上查一下scroll
js中scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
言程序
11-17 372
scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获...
JavaScript scrollLeft等属性详解
新页小苗
03-13 5856
 scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象
花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight
qq_40574071的博客
07-20 1593
一、经典图解读 先放上一张经典图 看不懂，没关系！接下来耐心看完必然有不一样的收获。 我们常遇到的是实际是这么几个属性： offsetTop clientHeight scrollTop scrollHeight 如果不把它们弄清楚就会导致每次遇到时都混淆不清，下面就逐一看看这么些属性。 （1）offsetTop HTMLElement.offsetTop为只读属性，它返回当前元素相对于其offsetParent元素的顶部内边距的距离。--MDN 【巧记】offset本身就是..
offsetWidth、clientWidth、scrollTop的区别？
06-09
offsetWidth是一个元素的完整宽度，包括border、padding和元素的width。 clientWidth是指元素的可视宽度，即不包括元素的border和滚动条的宽度，但包括padding。 scrollTop是指元素的滚动条在垂直方向上滚动的距离...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值