W3C规范页面,s = ” 网页可知区域宽

图片 1

<script>
function getInfo()
{
var s = “”;
s = ” 网页可知区域宽:” document.body.clientWidth;
s = ” 网页可知区域高:” document.body.clientHeight;
s = ” 网页可知区域宽:” document.body.offsetWidth ”
(包括边线和滚动条的宽)”;
s = ” 网页可知区域高:” document.body.offsetHeight ” (包含边线的宽)”;
s = ” 网页正文全文宽:” document.body.scrollWidth;
s = ” 网页正文全文高:” document.body.scrollHeight;
s = ” 网页被卷去的高(ff):” document.body.scrollTop;
s = ” 网页被卷去的高(ie):” document.documentElement.scrollTop;
s = ” 网页被卷去的左:” document.body.scrollLeft;
s = ” 网页正文部分上:” window.screenTop;
s = ” 网页正文部分左:” window.screenLeft;
s = ” 显示屏分辨率的高:” window.screen.height;
s = ” 荧屏分辨率的宽:” window.screen.width;
s = ” 显示器可用工作区中度:” window.screen.availHeight;
s = ” 显示屏可用专门的学问区宽度:” window.screen.availWidth;

 

s = ” 你的显示器设置是 ” window.screen.colorDepth ” 位彩色”;
s = ” 你的显示屏设置 ” window.screen.deviceXDPI ” 像素/英寸”;
//alert (s);
}
getInfo();
</script>

历次用JS获取页面包车型大巴高宽时总都是1对1的担忧,同贰特性质在不一致的浏览器或分歧的W3C标准下所表示的意味都不尽一样。以下就对准页面包车型地铁莫过于高宽和可知区域做个小结,以便我们查阅!

在IE、FireFox、Opera下都能够选拔
document.body.clientWidth
document.body.clientHeight
就可以拿到,比相当粗略,很有利。

1.
在W3C标准的事态下

Opera还是选拔
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原先是W3C的正规在作怪啊
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
若果在页面中增多那行标识的话 在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可知区域上涨的幅度
document.documentElement.clientHeight ==> 可知区域中度
在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象中度
document.documentElement.clientWidth ==> 可知区域升幅
document.documentElement.clientHeight ==> 可知区域高度

W3C规范页面,即在HTML代码尾部参预

在Opera中:
document.body.clientWidth ==> 可知区域上升的幅度
document.body.clientHeight ==> 可知区域中度
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==>
页面对象中度(即BODY对象高度加上Margin高)
而只要未有概念W3C的正统,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight
==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==>
页面对象中度(即BODY对象高度加上Margin高)

<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

 

在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可知区域上升的幅度
document.documentElement.clientHeight ==> 可知区域中度

 

在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域上升的幅度
document.documentElement.clientHeight ==> 可知区域低度

 

在Opera中:
document.body.clientWidth ==> 可知区域上涨的幅度
document.body.clientHeight ==> 可知区域中度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象中度(即BODY对象高度加上Margin高)

二.
在无W3C规范的景况下

即在HTML代码底部无

<!DOCTYPE
html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 

在IE中:
document.body.clientWidth ==> 可见区域升幅
document.body.clientHeight ==> 可知区域中度
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

 

在FireFox中:
document.body.clientWidth ==> 可知区域上涨的幅度
document.body.clientHeight ==> 可知区域中度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象中度加上Margin高)

 

在Opera中:
document.body.clientWidth ==> 可知区域上涨的幅度
document.body.clientHeight ==> 可知区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象中度(即BODY对象中度加上Margin高)

**3.
附录

  • 页面高宽的别样相关属性**

<script>

var
s = ”;

s += “\r\n 网页可知区域宽:”+
document.body.clientWidth;
s += “\r\n 网页可知区域高:”+
document.body.clientHeight;
s += “\r\n 网页可知区域宽:”+
document.body.offsetWidth + ” (包蕴边线和滚动条的宽)”;
s += “\r\n 网页可知区域高:”+
document.body.offsetHeight + ” (包含边线的宽)”;
s += “\r\n 网页正文全文宽:”+
document.body.scrollWidth;
s += “\r\n 网页正文全文高:”+
document.body.scrollHeight;
s += “\r\n 网页被卷去的高(ff):”+
document.body.scrollTop;
s += “\r\n 网页被卷去的高(ie):”+
document.documentElement.scrollTop;
s += “\r\n 网页被卷去的左:”+
document.body.scrollLeft;
s += “\r\n 网页正文部分上:”+
window.screenTop;
s += “\r\n 网页正文部分左:”+
window.screenLeft;
s += “\r\n 显示器分辨率的高:”+
window.screen.height;
s += “\r\n 显示器分辨率的宽:”+
window.screen.width;
s += “\r\n 荧屏可用职业区中度:”+
window.screen.availHeight;
s += “\r\n 显示器可用工作区宽度:”+
window.screen.availWidth;
s += “\r\n 你的显示屏设置是
“+ window.screen.colorDepth +” 位彩色”;
s += “\r\n 你的荧屏设置
“+ window.screen.deviceXDPI +” 像素/英寸”;

alert(s);

</script>

 

相关文章