JS获取浏览器窗口大小

最新推荐文章于 2024-09-27 21:51:57 发布
最新推荐文章于 2024-09-27 21:51:57 发布
阅读量134 收藏
点赞数
文章标签： xhtml javascript ViewUI

网页可见区域宽：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文档所在窗口的当前宽度。

实现代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>请调整浏览器窗口</title>

<metahttp-equiv="content-type"content="text/html;charset=gb2312">

</meta></head>

<body>

<h2align="center">请调整浏览器窗口大小</h2><hr/>

<formaction="#"method="get"name="form1"id="form1">

<!--显示浏览器窗口的实际尺寸-->

浏览器窗口的实际高度:<inputtype="text"name="availHeight"size="4"/><br/>

浏览器窗口的实际宽度:<inputtype="text"name="availWidth"size="4"/><br/>

</form>

<scripttype="text/javascript">

<!--

varwinWidth=0;

varwinHeight=0;

functionfindDimensions()//函数：获取尺寸

{

//获取窗口宽度

if(window.innerWidth)

winWidth=window.innerWidth;

elseif((document.body)&&(document.body.clientWidth))

winWidth=document.body.clientWidth;

//获取窗口高度

if(window.innerHeight)

winHeight=window.innerHeight;

elseif((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>

米斯特程序猿
关注
JS获取各种浏览器窗口大小的方法
12-09
常用:JS 获取浏览器窗口大小 代码如下:// 获取窗口宽度 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
JS获取浏览器窗口大小的方法
blog-xiaoh的博客
12-24 1376
JS获取浏览器窗口大小
js获取窗口大小
weixin_30828379的博客
05-16 81
常用:JS 获取浏览器窗口大小// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth))winWidth = document.body.clientWidth;// 获取窗口高度if (window.inne...
Javascript获取页面、屏幕尺寸大小参数
seanchan的专栏
12-02 1799
Javascript获取获取屏幕、浏览器窗口 ，浏览器，网页高度、宽度的大小 网页可见区域宽：document.body.clientWidth  网页可见区域高：document.body.clientHeight  网页可见区域宽：document.body.offsetWidth (包括边线的宽)  网页可见区域高：document.body.offsetHeight (包括边线的宽
JS 获取浏览器窗口大小
lixiaonaaa的博客
11-24 8191
常用: 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
JS获取浏览器窗口大小获取屏幕,浏览器,网页高度宽度[文].pdf
10-11
在JavaScript中，获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求，这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法，用于获取这些信息： 1. **网页可见...
js 获取浏览器窗口大小
04-12
js获取浏览器窗口事件，获取改变后的大小 下载后评论可返回1分
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
10-22
本文主要介绍如何使用JavaScript实现根据浏览器窗口大小动态调整网页文字大小的功能。该技术在实现网页响应式设计中具有重要意义，允许网页内容在不同尺寸的屏幕设备上都能保持良好的可读性和布局适应性。 首先，...
js获取窗口浏览器的大小
qq_46015513的博客
02-17 817
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
10-26
本篇文章主要介绍了JS获取屏幕,浏览器窗口大小,网页高度宽度的实现代码。需要的朋友可以过来参考下，希望对大家有所帮助
JS获取浏览器窗口/pc端大小
mao871863224的博客
08-06 671
1、获取浏览器窗口大小 window.innerWidth window.innerHight 2、获取PC端大小 var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 3、获
js获取各种浏览器窗口可视部分大小（可视部分不包含工具栏、标签栏等）
xuanwuziyou的专栏
11-25 2209
js获取各种浏览器窗口可视部分大小（可视部分不包含工具栏、标签栏等） function getViewportSize(w){ w= w || window; //除了IE8以及更早版本外，其它浏览器都能用 if(w.innerWidth != null){ return { w:w.innerWidth, h:w.innerHeight } }; //对标准模式下的IE或任何
JS---获取浏览器可视窗口的尺寸
最新发布
weixin_58694594的博客
09-27 660
【代码】JS---获取浏览器可视窗口的尺寸。
js怎样获取浏览器窗口尺寸
子玉的博客
10-29 1143
总结起来，我们可以使用 `window.innerWidth` 和 `window.innerHeight` 属性或 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性来获取浏览器窗口的尺寸，以及使用 `screen.width` 和 `screen.height` 属性来获取整个屏幕的尺寸。注意，这些方法获取的是浏览器窗口的尺寸，而不是整个屏幕的尺寸。
js和jQuery获取浏览器窗口的高度、宽度的方法详解
MOONCOM的博客
11-11 7808
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： docume
获取浏览器高宽
weixin_30632883的博客
09-20 273
s = " 网页可见区域宽：" document.body.clientWidth;s = " 网页可见区域高：" document.body.clientHeight;s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)";s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)"...
JavaScript全面解析：获取浏览器窗口和元素尺寸
"这篇文章主要介绍了如何使用JavaScript获取浏览器窗口的各种尺寸信息，包括宽度、高度以及滚动条相关的属性。" 在JavaScript中，获取浏览器窗口的大小是开发者经常需要进行的操作，这些信息对于页面布局和交互设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值