用户屏幕的总宽度 screen.width -
用户屏幕的总高度 screen.height -
对应用程序而言用户屏幕的有效宽度 screen.availWidth -
对应用程序而言用户屏幕的有效高度 screen.availHeight -
浏览器视窗宽度
document.documentElement.offsetWidth
window.innerWidth -当用户调整视窗大小的时候,这个值会动态改变。垂直滚动条(如果有)的宽度包含在内,但不包括 Explorer Bar 或 Sidebar. Note
浏览器视窗宽度
document.documentElement.offsetHeight
window.innerHeight -当用户调整视窗大小的时候,这个值会动态改变。水平滚动条(如果有)的长度包含在内,但不包括 Tip of the Day bar 的长度. Note
用户浏览器有效宽度 window.outerWidth -
用户浏览器有效高度 window.outerHeight -
高度已确定的浏览器视窗上的文档视图的宽度 document.documentElement.scrollWidth -
宽度已确定的浏览器视窗上的文档视图的高度 document.documentElement.scrollHeight -
用户浏览器窗口的左边到屏幕左边之间的水平距离 window.screenLeft window.screenX -
当缩放浏览器窗口时,本值会改变;目前不支持移动窗口时改变数值;这个值有可能是负数. MSIE 5+ 中计算的是内容区的左边到屏幕左边之间的距离. Note
用户浏览器窗口的顶端到屏幕的顶端之间的垂直距离 window.screenTop window.screenY -
当缩放浏览器窗口时,本值会改变;目前不支持移动窗口时改变数值;这个值有可能是负数. MSIE 5+ 中计算的是内容区的顶端到屏幕顶端左边之间的距离. Note
从左边的绝对位置的最近的父区或左边的布局器算起的水平距离/水平偏移: 以下是相应文档 ScreenData.offsetLeft -
从顶端的绝对位置的最近的父区或顶端的布局器算起的垂直距离/垂直偏移: 以下是相应文档 ScreenData.offsetTop -
var Element = evt.target ;
var CalculatedTotalOffsetLeft = CalculatedTotalOffsetTop = 0 ;
while (Element.offsetParent)
{
CalculatedTotalOffsetLeft += Element.offsetLeft ;
CalculatedTotalOffsetTop += Element.offsetTop ;
Element = Element.offsetParent ;
} ;
OffsetXForNS6 = evt.pageX - CalculatedTotalOffsetLeft ;
OffsetYForNS6 = evt.pageY - CalculatedTotalOffsetTop ;
Peter-Paul Koch's Properties and manipulation (via methods) of the Window object page
MasterGrid for MSIE 4 and 5 (operating systems Windows and MacIntosh), Netscape 4 and 6
http://www.quirksmode.org/viewport/compatibility.html
Web Developper Virtual Library's Grand Unified Table: events and supported properties of the event object
for Netscape 4 and MSIE 4 and 5
http://www.wdvl.com/Authoring/JavaScript/Events/table4.html
MSDN's interactive demo on measurement, dimension and location (in compatible mode only; not in standard-compliant mode)
http://msdn.microsoft.com/workshop/samples/author/css/overview/interactivemeasurement.htm
MSDN's interactive demo on measurement, object's event, scroll positions, client area (in compatible mode only; not in standard-compliant mode)
http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/measure.htm
MSDN's reference on object measurement and location, scroll position, DHTML positioning properties (in compatible mode only; not in standard-compliant mode)
http://msdn2.microsoft.com/en-us/library/ms533024.aspx
There is a major incompatibility between MSIE 5+ window.screenTop and NS 6+ window.screenY. MSIE 5+ calculates the distance from the top of the content area (client area) to the top side of the screen. NS 6+ calculates the distance from the top of the browser's window to the top side of the screen. There seems to be no way to figure out the height of chrome elements (menu bar, tools bar, address bar, links bar) present in the browser for MSIE 5+.
The same phenomenon is observed for MSIE 5+ window.screenLeft and NS 6+ window.screenX. MSIE 5+ calculates the distance from the left of the content area (client area) to the left side of the screen. NS 6+ calculates the distance from the left of the browser's window to the left side of the screen. When the MSIE 5+ Explorer Bar is displayed, we can clearly see that the window.screenLeft value is increased while when the NS 6+ Sidebar is displayed, the window.screenX value does not increase since the referenced coordinates system is different. The same phenomenon is observed for chrome bars at the top of the browser's application.
NS 6+ evt.layerX/Y properties calculate the distance from the left/top corner of an element if it is absolutely or relatively positioned; if it's not positioned, then the values are the distance from the left/top of its closest absolutely or relatively positioned containing element. In case the target element has no positioned element within the containment hierarchy, then the body element is the positioned containing element.
There appears to be 3 exceptions to this: input type="text", textarea and options in a select. When an event occurs in one of these 3 elements, regardless if they are positioned or not, the evt.layerX/Y properties will return the offset coordinates within them.
Here's an interactive demo on evt.layerX/Y property values.
MSIE 5+ event.offsetX/Y properties calculate the distance from the left/top corner of the target element (e.g. clicking inside an image) regardless if the element is absolutely or relatively positioned or if its containment element is positioned or not. There appears to be 4 exceptions to this: for A, H, P and SPAN elements, the event.offsetX/Y will return coordinates relative to the offsetParent (which is usually - not always - the closest positioned containing element), otherwise to the BODY element.
So NS 6+ evt.layerX/Y properties are not the equivalent of MSIE 5+ event.offsetX/Y properties.
Bugzilla Bug #460620; Target: ---
onresize events should fire while resizing horizontally and vertically the window, not just when the mouse stops moving