JS获取窗口宽度和高度

最新推荐文章于 2023-11-13 13:28:48 发布
原创 最新推荐文章于 2023-11-13 13:28:48 发布 · 407 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#浏览器 #JavaScript #IE #XHTML #Firefox #ViewUI

在没有DOCTYPE声明的情况下:

document.body.clientWidth

document.body.clientHeight

为当前窗口的宽度/高度;

在DOCTYPE声明以后

document.body.clientWidth

document.body.clientHeight

为整个页面的宽度/高度;

document.documentElement.clientWidth

document.documentElement.clientHeight

为当前窗口的宽度/高度;

同样增加DOCTYPE声明后

document.body.scrollLeft

document.body.scrollTop

要改为

document.documentElement.scrollLeft

document.documentElement.scrollTop


注意保存时，文件的编码要看好，有时会出现脚本错误，是因为编码的格式问题，如GB2312

------------------------------------------------------------------

在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到 document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用 document.documentElement来取代document.body,可以这样写
例：
var top = document.documentElement.scrollTop || document.body.scrollTop;
在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。
例：
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
这么写可以得到很好的兼容性。


---------------------------------------------------
JS获取浏览器窗口巨细 获取屏幕，浏览器，网页高度宽度

网页可见区域宽：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 (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度 if (window.innerHeight) winHeight = window.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.onresize=findDimensions;//--></script></body></html>
源程序解读

（1）程序首先建立一个表单，包括两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口巨细的转变而转变。

（2）在随后的JavaScript源代码中，首先界说了两个变量winWidth和winHeight，用于留存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者留存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口巨细，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单位素，结果输出至两个文本框。

（6）在JavaScript源代码的最后，通过挪用findDimensions ( )函数，完成整个操纵。
js获取浏览器宽度高度（整理）
天马3798
12-10 1万+
● window.innerHeight： 浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。● window.innerWidth： 浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。● window.outerWidth： 浏览器宽度，包含了浏览器边框所以这种方式不常用。一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）
【获取页面width和height】js、jq判断浏览器窗口的宽度和高度
weixin_48596030的博客
08-23 4373
【获取页面width和height】js、jq判断浏览器窗口的宽度和高度
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
10-26
本篇文章主要介绍了JS获取屏幕,浏览器窗口大小,网页高度宽度的实现代码。需要的朋友可以过来参考下，希望对大家有所帮助
JS：如何获取浏览器窗口尺寸？
TianXuab的博客
10-09 1444
JavaScript是一种广泛使用的脚本语言，用于开发网页和应用程序。在Web开发中，经常需要获取浏览器窗口的尺寸，以便根据窗口大小进行布局或执行其他操作。本文将介绍如何使用JavaScript来获取浏览器窗口尺寸。
js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变
03-11
js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变
DOCTYPE声明对JS获取窗口宽度和高度的影响
weixin_30478619的博客
10-26 178
在没有DOCTYPE声明的情况下: document.body.clientWidth document.body.clientHeight 为当前窗口的宽度/高度; 在DOCTYPE声明以后 document.body.clientWidth document.body.clientHeight 为整个页面的宽度/高度; document.documentElement.clientWidth ...
js获取窗口宽度、高度
weixin_34228662的博客
06-19 476
1、获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 2、获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight window.screen.availWidth 3、网页全文的高度和宽度： document.body.scrollHeight document.bo...
js 获取浏览器高度和宽度值(多浏览器)
10-29
浏览器高度和宽度值获取方法汇总 在 Web 开发中，获取浏览器的高度和宽度值是非常重要的，因为它能够帮助我们更好地布局页面元素和实现响应式设计。然而，浏览器的高度和宽度值获取方法却因浏览器的不同而有所区别...
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
01-19
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中，浏览器显示窗口大小只能以下获取： 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
12-02
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...
JS获取当前窗口的宽和高
wang_swa99er的博客
09-09 5542
JS获取当前窗口的宽和高 window.onload = function(){ document.onclick = function(){ //输出当前窗口的宽 var windowWidth = document.documentElement.clientWidth || document.body.clientWidth; alert(windowWidth); //输出当前窗口的高 var windowHe
JS获取浏览器窗口的宽度和高度
lake1314的专栏
03-20 1058
type="text/javascript"> var viewportwidth; var viewportheight; // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight if (typeof win
js怎样获取浏览器窗口尺寸
m0_74359467的博客
11-13 734
总结起来，我们可以使用 `window.innerWidth` 和 `window.innerHeight` 属性或 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性来获取浏览器窗口的尺寸，以及使用 `screen.width` 和 `screen.height` 属性来获取整个屏幕的尺寸。注意，这些方法获取的是浏览器窗口的尺寸，而不是整个屏幕的尺寸。
js获取页面 窗口的宽高
bangyanhu2790的博客
04-28 465
作者：Jony链接：https://www.zhihu.com/question/20816879/answer/16300680来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 IE中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度...
js获取窗口宽度高度
yushuir的专栏
03-22 155
var    s  =  "网页可见区域宽："+  document.body.clientWidth;  s  +=  "\r\n网页可见区域高："+  document.documentElement.clientHeight;  s  +=  "\r\n网页正文全文宽："+  document.body.scrollWidth;  s  +=  "\r\n网页正文全文高："+  docum...
JS获取网页宽高方法集合
aidenliu的专栏
07-09 4309
JS获取网页宽高等方法的集合：document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高document.body.offsetWidth - 网页可见区域宽，包括边线和滚动条的宽document.body.offsetHeight - 网页可见区域高，包括边线和滚动条的高document.body.scrollWidth - 网页总宽document.body.scrollHeight - 网页总高document.bod
js获取屏幕宽度
shyghost的专栏
06-17 6313
在做页面时，用户要求，不同的分辨率，弹出窗口的位置不同  我想是不是先获得屏幕宽度，然后付值给变量，再在onclick中设置参数  ---------------------------------------------------------------     alert(screen.width+"*"+screen.height)    -------------------------
JS 获取浏览器窗口大小
lixiaonaaa的博客
11-24 8286
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; els
JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位
不断成长的我
08-11 4134
浏览器的宽高示意图： JavaScript中常用的方法： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线
vue获取窗口高度和宽度
最新发布
04-23
<think>好的，我现在需要帮助用户解决在Vue中获取浏览器窗口高度和宽度的问题。用户已经提供了一些站内引用，里面有不同的实现方法，我需要综合这些信息，给出一个清晰的解决方案。 首先，我要理解用户的需求。用户想要在Vue组件中实时获取窗口的高度和宽度，可能用于响应式布局或者动态调整页面元素。根据提供的引用，有几种方法可以实现，比如在mounted钩子中设置onresize事件，使用watch监听数据变化，或者用addEventListener来绑定事件。 接下来，我需要比较这些引用中的不同方法，找出最佳实践。引用1和3提到了使用document.documentElement.clientWidth和document.body.clientWidth，这两者有什么区别呢？可能需要查阅一下两者的区别，确保推荐的方法准确。通常，document.documentElement对应的是html元素，而document.body对应的是body元素，clientWidth和clientHeight可能会受到CSS样式的影响，比如是否有滚动条等。需要指出正确的用法。 然后，引用5使用了window.innerHeight，这也是一个获取视窗高度的方法，但同样需要考虑浏览器兼容性。可能不同的方法在不同场景下适用，需要根据具体情况选择。 另外，用户之前的提问是关于el-upload组件限制文件格式的，现在的问题转向了Vue中获取窗口尺寸，看起来是新的问题，但可能需要参考之前的回答结构，保持一致性，比如分步骤说明，代码示例，注意事项等。 用户提供的引用中有不同的实现方式，比如有的在mounted中使用onresize，有的使用addEventListener。需要注意的是，直接覆盖window.onresize可能会有问题，如果组件被多次挂载，可能会覆盖之前的事件监听器。因此，更推荐使用addEventListener，并且在组件销毁时用removeEventListener移除监听，避免内存泄漏，如引用5所示。 此外，引用2中提到了在watch中监听宽度和高度的变化，这样可以在数据变化时执行某些操作，比如打印日志或调整布局。这可能对用户的需求有帮助，需要将这一点整合到回答中。 还有，用户可能希望实时更新数据，因此需要在resize事件触发时更新Vue的data属性，这样模板中可以动态显示这些值。需要确保在Vue实例中正确绑定这些数据，并通过方法更新它们。 还要考虑性能问题，resize事件可能会频繁触发，导致性能问题。可以采用防抖函数来限制处理的频率，比如引用中没有提到这一点，但这是一个常见的优化点，可能需要补充。 综合以上分析，我应该分步骤回答： 1. 基础实现：在data中定义变量，mounted中初始化尺寸，并绑定resize事件，在beforeDestroy中移除事件监听，避免内存泄漏。 2. 推荐方法：使用addEventListener，而不是直接赋值window.onresize，这样可以避免覆盖其他监听器。 3. 结合计算属性或侦听器：在watch中监听尺寸变化，执行相应操作，或者使用计算属性动态计算样式。 4. 性能优化：引入防抖函数，减少事件处理频率。 5. 注意事项：比如clientWidth与innerWidth的区别，CSS的影响，移动端适配等。 需要检查各个引用的内容，确保推荐的方法是正确的，并且没有遗漏关键点。比如引用5中在created钩子中添加事件监听，但一般来说，DOM操作应该在mounted中进行，因为created阶段DOM还未渲染。需要指出这一点。 最后，给出代码示例，展示完整的实现步骤，并解释每个部分的作用，确保用户能够理解并正确实施。</think>在Vue中实时获取浏览器窗口高度和宽度，可通过以下5种方法实现： ### 一、基础响应式实现 ```vue <template> <div> <p>窗口宽度：{{ windowWidth }}px</p> <p>窗口高度：{{ windowHeight }}px</p> </div> </template> <script> export default { data() { return { windowWidth: 0, windowHeight: 0 } }, mounted() { this.updateDimensions() window.addEventListener('resize', this.updateDimensions) }, beforeDestroy() { window.removeEventListener('resize', this.updateDimensions) }, methods: { updateDimensions() { this.windowWidth = document.documentElement.clientWidth this.windowHeight = document.documentElement.clientHeight } } } </script> ``` 该方法特点： 1. 使用标准`addEventListener`绑定事件[^5] 2. 通过`document.documentElement`获取精确视口尺寸[^1] 3. 组件销毁时自动移除监听避免内存泄漏 ### 二、优化版（带防抖函数） ```javascript methods: { updateDimensions: _.debounce(function() { this.windowWidth = window.innerWidth this.windowHeight = window.innerHeight }, 200) } ``` 使用Lodash的`debounce`函数控制触发频率，防止频繁更新导致的性能问题 ### 三、监听属性变化 ```javascript watch: { windowWidth(newVal) { console.log('宽度变化:', newVal) }, windowHeight(newVal) { console.log('高度变化:', newVal) } } ``` 当需要根据尺寸变化执行特定操作时，可通过watch监听实现[^2] ### 四、CSS视口单位联动 ```vue <template> <div :style="{ height: vhHeight }"></div> </template> <script> export default { computed: { vhHeight() { return `${this.windowHeight * 0.9}px` } } } </script> ``` 通过计算属性将窗口尺寸转换为CSS值，实现动态布局 ### 五、注意事项 1. **尺寸获取差异**： - `document.documentElement.clientWidth`：不包含滚动条 - `window.innerWidth`：包含滚动条[^3] 2. **移动端适配**： ```javascript // 添加viewport meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 3. **服务端渲染(SSR)**： ```javascript mounted() { if (process.client) { // 浏览器环境才执行 } } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值