js method to obtain browser height, window height, element size and offset attribute

As shown below:

screen.width
screen.height
 
 
screen.availHeight //获取去除状态栏后的屏幕高度
screen.availWidth //获取去除状态栏后的屏幕高度

1. Get the size of the screen through the browser

2. Get the size of the browser window content

//高度
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
 
//宽度
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidht
 
/ *
 * window.innerHeight  FF/CH 支持，获取窗口尺寸。
 * document.documentElement.clientHeight  IE/CH支持
 * document.body.client  通过body元素获取内容的尺寸
 
* /

3. Differences in scroll bar support

No For pages that make any scroll bar changes, Firefox/IE defaults to HTML elements that have scroll bar attributes. The body does not have it.

But Chrome thinks that the body has scroll bar attributes.

So the writing method for compatibility is:

   
document.documentElement.scrollTop || document.body.scrollTop

4. Get the size of the element

elemnt.offsetWidth
elemnt.offsetHeight
 
// 仅IE5不支持，放心使用吧

* offsetWidth can get the height size of the element, including: width + padding[left,right] + border[left,right ]

* offsetHeight can get the width size of the element, including: height + padding[top,bottom] + bottom[top,bottom]

5. The offset attribute of the element

element.offsetTop //获取元素与其偏移参考父元素顶部的间隔距离
element.offsetLeft //获取元素与其偏移参考父元素左边的间隔距离
element.offsetParent //获取当前元素的参考父元素

*offsetTop can get the element The distance from the top of its parent element's offset reference. Including: margin[top] + top

*offsetLeft can get the distance of the element from the left side of its upper-level offset reference parent element. Including: margin[left] + left

* Note that offsetParent has compatibility issues with IE8/FF/CH in IE6/7:

In FF/Chrome/IE8+:

If the current element is positioned, then The offset reference parent element is the nearest positioned element one level above it.

If the current element is not positioned, body will be the final reference parent element by default.

In IE6/7:

Regardless of whether it is positioned or not, its offset reference parent element is the parent element of the previous level.

In general:

Whether it is FF/Chrome or IE, the final reference parent element is the body element, so the compatible method is to get the offset position value from the current element to the body element.

Compatibility writing

function getOffestValue(elem){
 
    var Far = null;
    var topValue = elem.offsetTop;
    var leftValue = elem.offsetLeft;
    var offsetFar = elem.offsetParent;
 
    while(offsetFar){
      alert(offsetFar.tagName)
      topValue += offsetFar.offsetTop;
      leftValue += offsetFar.offsetLeft;
      Far = offsetFar;
      offsetFar = offsetFar.offsetParent;
    }
    return {'top':topValue,'left':leftValue,'Far':Far}
  }
 
/*
 * top 当前元素距离body元素顶部的距离。
 * left 当前元素距离body元素左侧的距离。
 * Far 返回最终的参考父元素。
*/