js-Methode, um Browserhöhe, Fensterhöhe, Elementgröße und Offset-Attribut zu erhalten

Wie unten gezeigt:

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

1. Holen Sie sich die Bildschirmgröße über den Browser

2 Die Größe von

//高度
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. Unterschiede in der Bildlaufleistenunterstützung

Für Seiten ohne Bildlaufleistenänderungen gilt in Firefox/IE standardmäßig Think von HTML-Elementen mit Scrollbar-Attributen. Der Körper hat es nicht.

Chrome geht jedoch davon aus, dass der Text über Bildlaufleistenattribute verfügt.

Die Kompatibilität wird also wie folgt geschrieben:

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

4. Ermitteln Sie die Größe des Elements

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

* offsetWidth kann die Höhenabmessung des Elements abrufen, einschließlich: Breite + Polsterung[links, rechts] + Rand[links, rechts]

* offsetHeight kann die Breitenabmessung des Elements abrufen, einschließlich: Höhe + padding[top,bottom] + bottom[top,bottom]

5. Das Offset-Attribut des Elements

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

*offsetTop kann den Abstand zwischen dem Element und seinem vorherigen ermitteln. Der Versatz der Ebene bezieht sich auf den Abstand von der Oberseite des übergeordneten Elements. Einschließlich: margin[top] + top

*offsetLeft kann den Abstand von der linken Seite des übergeordneten Offset-Referenzelements der vorherigen Ebene ermitteln. Einschließlich: margin[left] + left

* Beachten Sie, dass offsetParent in IE6/7 ist und Kompatibilitätsprobleme mit IE8/FF/CH hat:

in FF/Chrome/IE8+:

Wenn das aktuelle Element positioniert ist, ist das übergeordnete Referenzelement das am nächsten darüber positionierte Element.

Wenn das aktuelle Element nicht positioniert ist, ist body standardmäßig das endgültige übergeordnete Referenzelement.

In IE6/7:

Unabhängig von der Positionierung oder nicht, ist sein übergeordnetes Offset-Referenzelement das übergeordnete Element der vorherigen Ebene.

Im Allgemeinen gilt:

Ob FF/Chrome oder IE, das übergeordnete Referenzelement ist das Body-Element. Daher besteht die kompatible Methode darin, die Versatzposition des aktuellen Elements zum zu ermitteln Körperelementwert.

Kompatibilitätsschreiben

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 返回最终的参考父元素。
*/