`
minh456
  • 浏览: 63943 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

(转)JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

    博客分类：
  • JS
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文档所在窗口的当前宽度。

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
< !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">
</meta></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 ( )函数，完成整个操作。

 

<script>
function getInfo()
{
var s = “”;
s += ” 网页可见区域宽：”+ document.body.clientWidth;
s += ” 网页可见区域高：”+ document.body.clientHeight;
s += ” 网页可见区域宽：”+ document.body.offsetWidth + ” (包括边线和滚动条的宽)”;
s += ” 网页可见区域高：”+ document.body.offsetHeight + ” (包括边线的宽)”;
s += ” 网页正文全文宽：”+ document.body.scrollWidth;
s += ” 网页正文全文高：”+ document.body.scrollHeight;
s += ” 网页被卷去的高(ff)：”+ document.body.scrollTop;
s += ” 网页被卷去的高(ie)：”+ document.documentElement.scrollTop;
s += ” 网页被卷去的左：”+ document.body.scrollLeft;
s += ” 网页正文部分上：”+ window.screenTop;
s += ” 网页正文部分左：”+ window.screenLeft;
s += ” 屏幕分辨率的高：”+ window.screen.height;
s += ” 屏幕分辨率的宽：”+ window.screen.width;
s += ” 屏幕可用工作区高度：”+ window.screen.availHeight;
s += ” 屏幕可用工作区宽度：”+ window.screen.availWidth;
s += ” 你的屏幕设置是 “+ window.screen.colorDepth +” 位彩色”;
s += ” 你的屏幕设置 “+ window.screen.deviceXDPI +” 像素/英寸”;
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!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高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。



补充:

document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

分享到：
| sql2005添加自增字段
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变

    js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变

    JS获取浏览器窗口大小获取屏幕,浏览器,网页高度宽度[文].pdf

    在JavaScript中，获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求，这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法，用于获取这些信息： 1. **网页可见...

    JS获取浏览器窗口大小

    ### JS 获取浏览器窗口大小 在前端开发中，经常需要获取浏览器窗口的大小，以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性...

    JS根据浏览器窗口大小实时动态改变网页文字大小的方法

    本文主要介绍如何使用JavaScript实现根据浏览器窗口大小动态调整网页文字大小的功能。该技术在实现网页响应式设计中具有重要意义，允许网页内容在不同尺寸的屏幕设备上都能保持良好的可读性和布局适应性。 首先，...

    JavaScript 获取浏览器的显示区域大小信息

    ### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中，获取浏览器显示区域的大小是非常重要的一个环节，这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...

    javascript 浏览器窗口大小改变事件

    在JavaScript中，有以下两个主要的事件用于监听浏览器窗口大小的变化： 1. `resize` 事件：这是最直接与窗口大小变化相关的事件。当你拖动浏览器窗口的边缘或者调整窗口大小时，浏览器会触发这个事件。你可以通过在...

    js实现浏览器窗口大小被改变时触发事件的方法

    在web开发中，调整浏览器窗口大小是常见的用户操作之一，JavaScript提供了一种机制，允许我们在窗口大小变化时执行特定的代码。这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器...

    JS获取浏览器的高度和宽度

    - `window.screen.height` 和 `window.screen.width` 则提供了屏幕分辨率的高度和宽度，而不是浏览器窗口大小。 在定位元素时，还可以使用`scrollLeft`、`scrollWidth`、`clientWidth`、`offsetWidth`等属性，以及`...

    关于获取各种浏览器可见窗口大小

    - **`window.screenTop`** 和 **`window.screenLeft`**：这两个属性表示浏览器窗口相对于屏幕的位置。 - **`window.screen.width`** 和 **`window.screen.height`**：这两个属性表示屏幕的分辨率。 - **`window....

    js获取浏览器高度和宽度值(多浏览器)

    在JavaScript中，获取浏览器的高度和宽度是常见的需求，特别是在页面布局、动态内容调整或响应式设计中。这个主题涉及到浏览器的兼容性问题，因为不同的浏览器可能有不同的API来获取这些信息。以下是一些主要的知识...

    js获取浏览器高度和宽度值.pdf

    - `window.screen.height` 和 `window.screen.width`: 这两个属性返回用户的屏幕分辨率的高度和宽度，不考虑操作系统任务栏或浏览器窗口。 - `window.screen.availHeight` 和 `window.screen.availWidth`: 这两个...

    js 获取浏览器高度和宽度值(多浏览器)

    浏览器高度和宽度值获取方法汇总 在 Web 开发中，获取浏览器的高度和宽度值是非常重要的，因为它能够帮助我们更好地布局页面元素和实现响应式设计。然而，浏览器的高度和宽度值获取方法却因浏览器的不同而有所区别...

    js动态的获取浏览器页面放大缩小的比例.pdf

    - `window.outerWidth` 和 `window.innerWidth` 分别代表浏览器窗口的外边框宽度和内容区域的宽度。在没有`devicePixelRatio`或者不支持IE的场景下，可以通过这两个属性的比值来估计放大比例。不过这种方法并不准确...

    js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中，浏览器显示窗口大小只能以下获取： 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    在JavaScript中，获取当前页面...以上是关于“javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数”的主要知识点，通过学习和理解这些内容，开发者可以更好地控制和适应网页在不同设备和窗口大小下的表现。

    javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...

    js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    3. 获取浏览器窗口内容的高度和宽度，可以使用以下代码： ```javascript window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 高度 window.innerWidth || document....

Magicbox
Global site tag (gtag.js) - Google Analytics