javascript：获取屏幕高度和宽度等信息 & 制作滚动窗体时遇到的问题

本文链接：https://blog.csdn.net/licatm/article/details/5056620

javascript：获取屏幕高度和宽度等信息

网页可见区域宽： 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

获取网页被卷去的高，制作浮动窗体可用：
function GetScrollY()
{
    if (typeof window.pageYOffset == 'number')
    {
        return window.pageYOffset;
    }

    var CompatMode = window.document.compatMode;
    var DocumentElement = window.document.documentElement;

    if ((typeof CompatMode == 'string') && (CompatMode.indexOf('CSS') >= 0) && (DocumentElement) && (typeof DocumentElement.getAttribute("scrollTop") == 'number'))
    {
        return DocumentElement.getAttribute("scrollTop");
     }

    var Body = window.document.body ;

    if ((Body) && (typeof Body.getAttribute("scrollTop") == 'number'))
    {
        return Body.getAttribute("scrollTop");
    }

    return 0;
}

下面是“无定义 HTML 的 Event 事件”的测试代码，分别用 IE 和 Firefox 打开，点击页面就可看到结果。 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无定义 HTML 的 Event 事件</title>
<script language="javascript">
function getvalue(e){
if (!document.all){
winW = window.innerWidth;
winH = window.innerHeight;
curX = e.pageX - window.pageXOffset;
curY = e.pageY - window.pageYOffset;
mouX = e.pageX;
mouY = e.pageY;
broX = window.pageXOffset;
broY = window.pageYOffset;
}else{
winW = document.body.clientWidth;
winH = document.body.clientHeight;
curX = event.clientX;
curY = event.clientY;
mouX = event.clientX + document.body.scrollLeft;
mouY = event.clientY + document.body.scrollTop;
broX = document.body.scrollLeft;
broY = document.body.scrollTop;
}
alert(" 窗口可见宽度(winW): "+winW+"/n/n 窗口可见高度(winH): "+winH+"/n/n 距窗口左边距离(curX): "+curX+"/n/n 距窗口顶部距离(curY): "+curY+"/n/n 距页面左边距离(mouX): "+mouX+"/n/n 距页面顶部距离(mouY): "+mouY+"/n/n 页面滚动的宽度(broX): "+broX+"/n/n 页面滚动的高度(broY): "+broY);
return true;
}
document.οnclick=getvalue;
</script>
</head>

<body>
<img src="" width="400" height="500">
</body>
</html>

下面是“定义了 HTML's DOCTYPE 的 Event 事件”的测试代码，分别用 IE 和 Firefox 打开，点击页面就可看到结果。很显然，document.body 变成了 document.documentElement。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>定义了 HTML's DOCTYPE 的 Event 事件</title>
<script language="JavaScript" type="text/javascript">
function getvalue(e){
if (!document.all){
winW = window.innerWidth;
winH = window.innerHeight;
curX = e.pageX - window.pageXOffset;
curY = e.pageY - window.pageYOffset;
mouX = e.pageX;
mouY = e.pageY;
broX = window.pageXOffset;
broY = window.pageYOffset;
}else{
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
curX = event.clientX;
curY = event.clientY;
mouX = event.clientX + document.documentElement.scrollLeft;
mouY = event.clientY + document.documentElement.scrollTop;
broX = document.documentElement.scrollLeft;
broY = document.documentElement.scrollTop;
}
alert(" 窗口可见宽度(winW): "+winW+"/n/n 窗口可见高度(winH): "+winH+"/n/n 距窗口左边距离(curX): "+curX+"/n/n 距窗口顶部距离(curY): "+curY+"/n/n 距页面左边距离(mouX): "+mouX+"/n/n 距页面顶部距离(mouY): "+mouY+"/n/n 页面滚动的宽度(broX): "+broX+"/n/n 页面滚动的高度(broY): "+broY);
return true;
}
document.οnclick=getvalue;
</script>
</head>

<body>
<img src="" width="400" height="500" alt="" />
</body>
</html>