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.onclick=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.onclick=getvalue;
</script>
</head>
<body>
<img src="" width="400" height="500" alt="" />
</body>
</html>
分享到:
相关推荐
使用JavaScript获取屏幕高度和宽度等信息
javascript 获取滚动条高度 页面宽度 页面高度 教程
Javascript浏览器和屏幕各种高度宽度.pngJavascript浏览器和屏幕各种高度宽度.png
主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...
javascript 滚动窗体 弹出窗体 自动隐藏窗体 可拖动窗体
javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf
javascript 获取当前面可视高度和宽度及浏览器宽度和高度的函数.docx
javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf
javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar
javascript获取网页高度宽度.rar
javascript 获取网页高度宽度.pdf
javascript获取浏览器的高度和宽度
javascript获取设置div的高度和宽度兼容任何浏览器.docx
JS获取各种屏幕的宽度和高度
javascript获取隐藏元素(display-none)的高度和宽度的方法.docx
经常发现在写JavaScript的时候,都需要用到网页、浏览器或屏幕的高度和宽度来解决布局定位的问题,时常前用后忘,要不就是在网上search,干脆自己总结一下,这样也方便再次使用,省时省力。 网页可见区域宽:...
js判断上传图片大小,宽度,高度,javascript判断上传图片大小,宽度,高度