javascript中的那些宽度和高度

标签：client   margin   浏览器   cli   工具   任务   涵盖   javascrip   height   

window.outerHeight和window.innerHeight

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

1 var w = window.innerWidth ||  document.documentElement.clientWidth || document.body.clientWidth;
2 
3 var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

 该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）

Window Screen 有关用户 屏幕 信息

window.screen.height

window.screen.width

window.screen.availHeight

window.screen.availWidth

window.screenLeft

window.screenTop 

• screen.availWidth - 可用的屏幕宽度    属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

• screen.availHeight - 可用的屏幕高度   属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

1.  无padding  无滚动

　　2.有padding  无滚动    可视区的宽度 = 150 + 10*2 = 170

　　3.有padding 有滚动条    clientWidth = 150 + 10*2 -滚动条宽度 = 153

-------------------------------------------------------------------------------我是分割线---------------------------------------------------------------------------------------------------

  就是边框

javascript中的那些宽度和高度

标签：client   margin   浏览器   cli   工具   任务   涵盖   javascrip   height   

原文地址：http://www.cnblogs.com/xiaqilin/p/6846492.html