So erhalten Sie die Höhe und Breite von Dokumenten ohne Verwendung von jquery

Antworten:

119 
var height = document.body.clientHeight;
var width = document.body.clientWidth;

Überprüfen Sie: diesen Artikel für eine bessere Erklärung.

Damb
quelle
9
Dies ist kein Cross-Browser. Sie sollten dies getestet haben, bevor Sie es veröffentlichen.
12
@ Iwazaru Danke, dass du darauf hingewiesen hast. Sieht aus wie diese 4 Jahre alte Antwort nicht kugelsicher ist :)
Damb
2
Es scheint, es ist browserübergreifend .
MAChitgarha
Wenn eine Website einen Rahmen hat, wird dieser mit dieser Lösung von der Breite abgezogen, nicht jedoch mit der jQuery-Lösung. Es ist unwahrscheinlich, dass es sich um eine Grenze zum Körper handelt, aber es ist wissenswert. window.innerWidthlöst dies
BritishSam
Dies gibt die Höhe des Browserfensters zurück (wenn Sie die Höhe des Browsers anpassen, ändert sich dies), nicht die Höhe des Inhalts / der Webseite.
Radmation
56

Selbst das letzte Beispiel auf http://www.howtocreate.co.uk/tutorials/javascript/browserwindow funktioniert nicht im Quirks-Modus. Leichter zu finden als ich dachte, scheint dies die Lösung zu sein (extrahiert aus dem neuesten JQuery-Code):

Math.max(
    document.documentElement["clientWidth"],
    document.body["scrollWidth"],
    document.documentElement["scrollWidth"],
    document.body["offsetWidth"],
    document.documentElement["offsetWidth"]
);

Ersetzen Sie einfach die Breite durch "Höhe", um die Höhe zu erhalten.

Dan
quelle
1
Dies sollte die richtige Antwort sein. clientWidth hat nicht immer den richtigen Wert.
Wildhammer
Problem mit clientWidth ist, dass es nur sichtbar ist. scrollWidth enthält Dinge, die vom Bildschirm auslaufen. Zumindest gilt dies für meine Chrome-Experimente im Jahr 2019.
StayCool
@StayCool Es scheint, dass die neueste jQuery diese Methode immer noch für die Berechnung der Dokumenthöhe / -breite verwendet und das gleiche Ergebnis liefert wie $(document).width(). Vielleicht sind Sie auf der Suche nach etwas, $(window).width()das in reinem JS nur document.documentElement["clientWidth"]in modernen Browsern zu finden wäre.
Dan
38

Dies ist eine browserübergreifende Lösung:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
hamid
quelle
Dies ist eine sichere und genaue Sache zu tun
Nan Zhou
1
Dies gibt die Fensterhöhe und -breite zurück, nicht die Dokumenthöhe und -breite
Michael
25

Sie sollten verwenden, getBoundingClientRectda dies normalerweise browserübergreifend funktioniert und Ihnen eine Subpixel-Genauigkeit für das Begrenzungsrechteck bietet .

elem.getBoundingClientRect()
Erik Aigner
quelle
1
für diejenigen, die sich über Support wundern: caniuse.com/#feat=getboundingclientrect
Mike Gleason jr. Couturier
Dies gibt eine Höhe von 0 zurück, als ich es auf document.body verwendet habe
Michael
Wahrscheinlich, weil Ihr Körper die Höhe 0 hat. Wenn Sie den Anzeigetyp nicht ändern, ist dies standardmäßig der Fall. Überprüfen Sie es im DOM-Inspektor.
Erik Aigner
11

Abrufen der Dokumentgröße ohne jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

Und verwenden Sie diese Option, wenn Sie eine Bildschirmgröße benötigen

screen.width
screen.height
Tamasviktor
quelle
8

Sie können auch versuchen:

document.body.offsetHeight
document.body.offsetWidth
Mihai Frentiu
quelle
1
Seien Sie vorsichtig, wenn Sie diese in Ereignissen wie der Größenänderung von Fenstern verwenden. Sie müssen die Höhe und Breite berechnen, was eine Weile dauert.
Meilen
8

Dies sollte für alle Browser / Geräte funktionieren:

function getActualWidth()
{
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}
user937284
quelle
window.innerWidth ist die einzige, die auch korrekt ist, wenn die Entwickler-Tools auf Chrome geöffnet sind
Alex
4

Wenn Sie die gesamte Breite der Seite einschließlich des Überlaufs erhalten möchten, verwenden Sie document.body.scrollWidth.

Arlen Beiler
quelle
Ist diese Lösung browserübergreifend?
Rückruf
1

Wie kann man die Breite und Höhe des Dokuments sehr einfach herausfinden?

in HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>

in Javascript

     var c=document.querySelector('#hidden_placer');

     var r=c.getBoundingClientRect();
     r.right=document width
     r.bottom=document height`

Sie können dies bei Bedarf bei jedem Fenstergrößenänderungsereignis aktualisieren.

Joshy Francis
quelle
0

windowist das Anwendungsfenster des gesamten Browsers. documentist die angezeigte Webseite, die tatsächlich geladen ist.

window.innerWidthund window.innerHeightberücksichtigt Bildlaufleisten, die möglicherweise nicht Ihren Wünschen entsprechen.

document.documentElementist die vollständige Webseite ohne die obere Bildlaufleiste. document.documentElement.clientWidthGibt die Größe der Dokumentbreite ohne y-Bildlaufleiste zurück. document.documentElement.clientHeightGibt die Größe der Dokumenthöhe ohne x Bildlaufleiste zurück.

user3798451
quelle