it-swarm.com.de

clientHeight / clientWidth gibt verschiedene Werte in verschiedenen Browsern zurück

Eigenschaften document.body.clientHeight und document.body.clientWidth gibt unterschiedliche Werte in IE7, IE8 und Firefox zurück:

IE 8:

document.body.clientHeight : 704 
document.body.clientWidth  : 1148

IE 7:

document.body.clientHeight : 704 
document.body.clientWidth  : 1132

Feuerfuchs:

document.body.clientHeight : 620 
document.body.clientWidth  : 1152

Warum besteht diese Diskrepanz?
Gibt es äquivalente Eigenschaften, die für verschiedene Browser (IE8, IE7, Firefox) ohne Verwendung von jQuery konsistent sind?

24
nmdr

Dies hat mit dem Box-Modell des Browsers zu tun. Verwenden Sie etwas wie jQuery oder eine andere JavaScript-Abstraktionsbibliothek, um das DOM-Modell zu normalisieren.

5
Paul Alexander

Paul A hat Recht, warum die Diskrepanz besteht, aber die von Ngm angebotene Lösung ist falsch (im Sinne von JQuery).

Das Äquivalent von clientHeight und clientWidth in jquery (1.3) ist

$(window).width(), $(window).height()
23
arajek

Das body -Element nimmt die verfügbare Breite an, die normalerweise Ihr Browser-Ansichtsfenster ist. Als solches wird es unterschiedliche Dimensionen über den Browser hinweg geben, aufgrund von Browser chrome= Rahmen, Bildlaufleisten, vertikalem Raum, der von Menüs eingenommen wird und so weiter ...

Die Tatsache, dass die Höhen ebenfalls variieren, sagt mir auch, dass Sie die Höhe von body/html durch CSS auf 100% setzen, da die Höhe normalerweise von Elementen innerhalb von body abhängig ist.

Sofern Sie die Breite des body - Elements nicht über css oder dessen Stileigenschaft auf einen festen Wert setzen, variieren die Abmessungen in der Regel immer zwischen Browsern/Versionen und möglicherweise sogar in Abhängigkeit von den für das installierten Plugins Browser. Konstante Werte sind in einem solchen Fall eher eine Ausnahme von der Regel ...

Wenn Sie .clientWidth für andere Elemente aufrufen, die nicht die automatische Breite des Browser-Ansichtsfensters annehmen, wird immer die Breite + Auffüllung der Elemente zurückgegeben. Ein div mit einer Breite von 200 und einem Abstand von 20 hat also clientWidth = 240 (20 Abstände links und rechts).

Der Hauptgrund, warum man clientWidth aufruft, ist jedoch genau auf mögliche erwartete Abweichungen bei den Ergebnissen zurückzuführen. Wenn Sie wissen, dass Sie eine konstante Breite erhalten und der Wert bekannt ist, ist das Aufrufen von clientWidth überflüssig ...

5
BGerrissen

Das Äquivalent von offsetHeight und offsetWidth in jQuery ist $ (window) .width (), $ (window) .height (). Es handelt sich nicht um clientHeight und clientWidth

3
Niels Steenbeek

Element.clientWidth & Element.clientHeight Geben die Höhe/Breite des Inhalts des Elements zuzüglich etwaiger Auffüllungen zurück.

Die jQuery-Implementierung dieser sind: $(target).outerWidth() & $(target).outerHeight()

.clientWidth & .clientHeight Sind in der CSSOM View Module-Spezifikation enthalten, die sich derzeit im Arbeitsentwurf befindet. Während moderne Browser eine konsistente Implementierung dieser Spezifikation haben, sollte die jQuery-Implementierung weiterhin verwendet werden, um eine konsistente Leistung auf älteren Plattformen zu gewährleisten.

Zusätzliche Information:

  • https: //developer.mozilla [dot] org/de-DE/docs/Web/API/Element.clientWidth
  • https: //developer.mozilla [dot] org/de-DE/docs/Web/API/Element.clientHeight
1
Brice

Was ich getan habe, um mein Problem mit clientHeight zu beheben, ist die clientHight des Steuerelements firstChild zu verwenden. Ich benutze IE 11, um Etiketten aus einer Datenbank zu drucken, und die clientHeight, die in IE 8 funktionierte, gab die Höhe von 0 in IE 11. Ich habe in diesem Steuerelement eine Eigenschaft gefunden, die als firstChild aufgeführt ist und die eine Eigenschaft hat, wenn clientHeight und tatsächlich die von mir gesuchte Höhe hat. Wenn Ihr Steuerelement also eine clientSize von 0 zurückgibt, schauen Sie sich die Eigenschaft an von seinem ersten Kind. Es hat mir geholfen ...

1

ich hatte ein ähnliches Problem - Firefox gab den korrekten Wert von obj.clientHeight zurück, aber nicht - es gab 0 zurück. Ich änderte ihn in obj.offsetHeight und es funktionierte. Es scheint, dass es einen Zustand gibt, der zB für die Kundenhöhe gilt - das macht es zweifelhaft ...

0
Johnny Darvall

Weitere Informationen zum Browserfenster: http://www.w3schools.com/js/js_window.asp?output=print

0
Biranchi

Es kann durch IE Box-Modell-Fehler verursacht werden. Um dies zu beheben, können Sie den Box Model Hack verwenden.

0
Steve Harrison