js获取当前窗口大小带滚动条

最新推荐文章于 2022-01-17 18:45:49 发布
最新推荐文章于 2022-01-17 18:45:49 发布
阅读量853 收藏
点赞数
分类专栏： .net 文章标签： 浏览器 文档 html 工作 xhtml input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhdd1234/article/details/6663330
版权
 

<SCRIPT   LANGUAGE="JavaScript">
// alert(document.body.scrollHeight);
// alert(document.body.scrollTop);
// alert(document.documentElement.scrollTop);
alert(document.body.clientWidth);
alert(document.body.scrollHeight);

</SCRIPT>

///

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth


HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

 

－－－－－－－－－－－－－－－－－－－

技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码

<!------------------------------文件名：30.3.htm------------------------------>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!-- 
var winWidth = 0;
   var winHeight = 0;
   function findDimensions() //函数：获取尺寸
   {
   //获取窗口宽度
   if (windows.innerWidth)
   winWidth = windows.innerWidth;
   else if ((document.body) && (document.body.clientWidth))
   winWidth = document.body.clientWidth;
   //获取窗口高度
   if (windows.innerHeight)
   winHeight = windows.innerHeight;
   else if ((document.body) && (document.body.clientHeight))
   winHeight = document.body.clientHeight;
   //通过深入Document内部对body进行检测，获取窗口大小
   if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
   {
   winHeight = document.documentElement.clientHeight;
   winWidth = document.documentElement.clientWidth;
   }
   //结果输出至两个文本框
   document.form1.availHeight.value= winHeight;
   document.form1.availWidth.value= winWidth;
   }
   findDimensions();
   //调用函数，获取数值
   window.οnresize=findDimensions;
//-->
</script>
</body>
</html>

 

brock
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取浏览器和屏幕的各种宽度高度
01-19
一：网页可见区域宽高，不包括工具栏和滚动条（浏览器窗口可视区域大小） 1.对于IE9+、chrome、firefox、Opera、Safari： window.innerHeight浏览器窗口的内部高度； window.innerWidth浏览器窗口的内部宽度； 2....
获取整个页面包括滚动条的宽度，获取滚动条宽度
汤一飞
08-29 1万+
原因想要做响应式设计，遇到——本来没有滚动条，缩小窗口时出现竖直滚动条，因为获取不到document+滚动条的宽度，所以可能莫名其妙的，没有在设置好的断点处达成相应效果。所以需要获取整个页面包括滚动条的宽度做判断。解决办法实时获取当前浏览所用浏览器的滚动条宽度//获取当前浏览器滚动条的宽度，原理是设置一个不可见的div，查看设置scorll前后的宽度差 function getScr
js获取页面滚动条宽度
haoyanyu_的博客
07-08 2685
let cached; function getScrollBarSize(fresh){ //fresh 是否重新获取, cached: 是否获取过 if(fresh || cahced===undefined) { const inner = document.createElement('div'); inner.style.width = '100%'; inner.sty...
JavaScript——获取浏览器滚动条(ScrollBar)宽度
无限迭代中......
03-29 4576
问题描述 不同浏览器的滚动条宽度不相同，需要动态获取浏览器滚动条宽度。 问题分析 screen.width屏幕分辨率宽度 document.body.scrollWidth页面完整宽度 document.body.scrollHeight页面完整宽度 document.body.clientWidthwidth+左右padding document.body.clientH...
js获取滚动条宽度
风如白话的博客
05-15 2821
js获取滚动条宽度 getScrollbarWidth() { let scrollDiv = document.createElement('div'); scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;' document.body.appendChild(scrollDiv) let scrollbarWidt
宽度和高度-js-引
十年一剑
06-09 754
// alert(document.body.scrollHeight); // alert(document.body.scrollTop);// alert(document.documentElement.scrollTop);alert(document.body.clientWidth);alert(document.body.scrollHeight);/* w   =docum
JavaScript网页特效范例宝典源码
09-04
实例027 设置窗口大小和位置 43 实例028 刷新当前页 44 实例029 自动最大化 45 实例030 自定义导航控制面板 46 实例031 根据用户分辨率自动调整窗口 48 1.5 窗口的其他效果 49 实例032 打开窗口时显示对话框 50 实例...
程序天下:JavaScript实例自学手册
07-08
12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关...
javascript常用对象梳理
06-23
scrollbar：指定当前窗口文档大于窗口时是否有滚动条，选项的值及含义与 toolbar相同； resizable：指定窗口是否可改变大小，选项的值及含义与toolbar相同； width：以像素为单位指定窗口的宽度，已被...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关...
js获取window窗口高度（页面滚动条可滚动高度） - 代码篇
草巾冒小子的博客
04-14 6465
javascript 和 jquery代码： //原生 javascript 代码： let scrollHeight = document.documentElement.scrollTop; // 滚动条的滚动行程 //jquery封装代码： let scrollHeight = $(window).scrollTop(); // 滚动条的滚动行程 应用案例 · （代码+截图） ： v...
js获取屏幕宽度方法大全
热门推荐
weixin_44959182的博客
11-21 1万+
js获取当前屏幕宽度方法 可见域：即可以被显示出来的区域，由起高度大小决定，包括所有内边距、滚动条（被滚动出去的内容）和边框大小。 网页可见域宽（不包括边框）：document.body.clientWidth 包括内容和内边距，整个文档宽度，即使被卷出去挡住的 网页可见域高（不包括边框）：document.body.clientHeight 包括内容和内边距，整个文档高度，即使被卷出去挡住的 网页可见域宽（包括边框）：document.body.offsetWidth 包括内容、内边距、边框，整个文档
javascript--window对象及宽高、位置、滚动条
sun_chen_93的博客
08-21 1444
//window的属性，大部分都是只读的，不支持设置，这里也就不一一分析。使用的时候window全部作为只读看待，不要设置。 //为了简便，除非特殊说明，此文档中的document.body代表元素（标签） //一些需要兼容地方，也都有体现，没有过多解释。 /*获取常用对象：这里的每个对象都是一个完整的体系，都要掌握*/ window.location window.history windo...
javascript 获取滚动条高度+常用js页面宽度与高度
liuvlun的专栏
03-02 452
/********************  * 取窗口滚动条高度   ******************/ function getScrollTop() {     var scrollTop=0;     if(document.documentElement&&document.documentElement.scrollTop)     {         scroll
js自定义页面滚动条
qq_44001124的博客
01-17 1079
css部分，把网页内置的滚动条隐藏 html, body { overflow: hidden; height: 100%; margin: 0; } #wrap { position: relative; height: 100%; } #chute { position: a
html如何获取滚动条,js如何来实现获取滚动条宽度（代码示例）
weixin_42303721的博客
06-10 1303
本篇文章给大家带来的内容是关于js如何来实现获取滚动条宽度(代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。思路：通过创建一个元素，不要给元素设置边框，然后给元素设置overflowY:scroll，再根据元素的offsetWidth-clientWidth来计算滚动条宽度。代码：计算滚动条宽度// 封装获取滚动条宽度的方法function getScrollBarWid...
JavaScript 获取页面滚动条尺寸
weixin_33777877的博客
07-06 177
为什么80%的码农都做不了架构师？>>> ...
js 获取当前屏幕大小
最新发布
06-03
你可以使用 JavaScript 的 innerWidth 和 innerHeight ...注意，这将返回窗口的内部宽度和高度，不包括浏览器工具栏、滚动条等元素的大小。如果你需要包括这些元素的大小，可以使用 outerWidth 和 outerHeight 属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值