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.jb200.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>
相关链接: