<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window.innerWidth window.screenLeft:window.screenX </title>
</head>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
//只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。
var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;
var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;
//window.screenLeft火狐不支持undefined,火狐得使用window.screenX
//window.screenX ie不支持undefined,ie得使用window.screenLeft
//每个浏览器对这两个数据的解析不一样
document.getElementById("demo").innerHTML=leftPos+"</br>"+topPos+"</br>";
//window.moveTo(100,100);
alert(window.innerWidth);
alert(document.documentElement.clientWidth);
alert(document.body.clientWidth);
// window.innerWidth 与或出来最大值
alert(window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth);
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
document.getElementById("demo1").innerHTML ="window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth:"+w;
//每个浏览器对这两个数据的解析不一样
alert(window.innerHeight);
alert(document.documentElement.clientHeight);
alert(document.body.clientHeight);
//window.innerHeight 与或出来最大值
alert(window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight);
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
document.getElementById("demo2").innerHTML = "window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight" + h;
//每个浏览器对这两个数据的解析不一样
//Internet Explorer 8,7,6,5:document.documentElement.clientHeight要么document.body.clientHeight浏览器窗口(浏览器窗口)不包括工具栏和滚动条。
//window.screen对象可以在没有窗口的前缀被写入,该window.screen对象包含了用户的屏幕信息.
//screen.width属性返回访问者的像素屏幕的宽度.
//该screen.availWidth属性返回访问者的屏幕的宽度,以像素为单位,减去界面功能,如Windows任务栏上。
document.getElementById("demo4").innerHTML =
"Screen Width: " + screen.width+"</br>"
+"Screen Height: " + screen.height+"</br>"
+"Available Screen Width: " + screen.availWidth+"</br>"
+"Available Screen Height: " + screen.availHeight+ "</br>";
//每个浏览器对这两个数据的解析一样
</script>
</body>
</html>
window.screenLeft:window.screenX,window.innerWidth,screen.width,screen.availWidth
最新推荐文章于 2024-08-06 09:59:58 发布