教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 js获取浏览器窗口大小与屏幕宽高

js获取浏览器窗口大小与屏幕宽高

发布时间:2015-06-08   编辑:jiaochengji.com
本文介绍了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

例子:
 

复制代码 代码示例:
<!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>请调整浏览器窗口_www.jiaochengji.com</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>

 相关链接:

JS获取屏幕高度与宽度方法 JS获取屏幕尺寸大小实例 js获取浏览器与屏幕宽度高度 js如何获取屏幕高度 js获取屏幕宽度实例代码 js获取屏幕宽度代码分享 js获取屏幕高度与宽度 js与jquery获取屏幕宽度与高度 js 获取浏览器与屏幕宽高信息 js获取屏幕宽度高度 js中window.open用法

您可能感兴趣的文章:
JS获取屏幕尺寸大小实例
js获取屏幕高度与宽度
js获取浏览器窗口大小与屏幕宽高
js如何获取屏幕高度
js获取浏览器与屏幕宽度高度
js获取屏幕高度 js屏幕属性信息
js与jquery获取屏幕宽度与高度
js获取屏幕宽度实例代码
js获取屏幕分辨率示例
js与Jquery获取屏幕的宽度和高度的方法

[关闭]
~ ~