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

112

So erhalten Sie Dokumenthöhe und -breite in pure Javascript dh ohne zu benutzen jquery.
Ich weiß über $(document).height()und Bescheid $(document).width(), aber ich möchte dies in tunJavascript.

Ich meinte die Höhe und Breite der Seite.

javascript

— Saritha
quelle

james.padolsey.com/javascript/get-document-height-cross-browser

— Klemen Tušar

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