So ermitteln Sie die Breite und Höhe der Seite mit JQuery

Bei der Frontend-Entwicklung ist es oft notwendig, die Breite und Höhe der Seite zu ermitteln, um sie entsprechend der Seitengröße zu gestalten oder dynamisch anzupassen. In jQuery können die Seitenbreite und -höhe mit den folgenden Methoden ermittelt werden.

1. Verwenden Sie die Methoden .width() und .height(), um die Breite und Höhe der Seite zu ermitteln.

jQuery bietet eine Reihe von Methoden zur Größenerfassung, einschließlich der Methoden .width() und .height() werden verwendet, um die Breite und Höhe des Elements zu ermitteln. Für die gesamte Dokumentseite können wir die Seitengröße ermitteln, indem wir die Breite und Höhe des Hauptelements ermitteln. Der Beispielcode lautet wie folgt:

var pageWidth = $('body').width();
var pageHeight = $('body').height();
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

Es ist zu beachten, dass die erhaltene Seitengröße möglicherweise nicht die endgültige Größe ist, da sich die Seite möglicherweise in einem dynamischen Anpassungszustand befindet. Um die endgültige Seitengröße zu erhalten, können Sie den obigen Code in das Fensterladeereignis einschließen, um sicherzustellen, dass die Seite vollständig geladen ist, bevor die Größe ermittelt wird. Der Beispielcode lautet wie folgt:

$(window).load(function(){
    var pageWidth = $('body').width();
    var pageHeight = $('body').height();
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

2. Verwenden Sie das $(window)-Objekt, um die Breite und Höhe der Seite zu ermitteln

Eine andere Methode besteht darin, das $(window)-Objekt zu verwenden, um die Breite und Höhe der Seite zu ermitteln . Das $(window)-Objekt stellt das Browserfensterobjekt dar, sodass die aktuelle Fenstergröße über dieses Objekt abgerufen werden kann, was der Größe der Seite entspricht. Der Beispielcode lautet wie folgt:

var pageWidth = $(window).width();
var pageHeight = $(window).height();
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

Es ​​ist auch zu beachten, dass die erhaltene Seitengröße möglicherweise nicht der endgültigen Größe entspricht. Daher kann der obige Code auch in das Fensterladeereignis eingebunden werden, um sicherzustellen, dass die Seite vor dem Abrufen vollständig geladen ist die Größe. Der Beispielcode lautet wie folgt:

$(window).load(function(){
    var pageWidth = $(window).width();
    var pageHeight = $(window).height();
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

3. Verwenden Sie document.documentElement.clientWidth und document.documentElement.clientHeight, um die Seitenbreite und -höhe zu erhalten.

Eine andere Möglichkeit, die Seitenbreite und -höhe zu ermitteln, ist die Verwendung von document.documentElement. clientWidth- und document.documentElement.clientHeight-Eigenschaften. Diese beiden Eigenschaften stellen die Breite bzw. Höhe des Dokumentansichtsfensters dar, bei dem es sich um den sichtbaren Bereich der aktuellen Webseite handelt. Das Codebeispiel lautet wie folgt:

var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

Es ​​ist auch zu beachten, dass die erhaltene Seitengröße möglicherweise nicht der endgültigen Größe entspricht. Daher kann der obige Code auch in das Fensterladeereignis eingebunden werden, um sicherzustellen, dass die Seite vor dem Abrufen vollständig geladen ist die Größe. Der Beispielcode lautet wie folgt:

$(window).load(function(){
    var pageWidth = document.documentElement.clientWidth;
    var pageHeight = document.documentElement.clientHeight;
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

Zusammenfassung:

Der mit den oben genannten drei Methoden erzielte Effekt besteht darin, die Breite und Höhe der Seite zu ermitteln. Welche Methode Sie verwenden, hängt von Ihren spezifischen Bedürfnissen und Projektrealitäten ab. Beachten Sie jedoch, dass die erhaltene Seitengröße möglicherweise nicht der endgültigen Größe entspricht. Daher ist es am besten, den Code in das Fensterladeereignis einzuschließen, um sicherzustellen, dass die Seite vollständig geladen ist, bevor die Größe ermittelt wird.

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie die Breite und Höhe der Seite mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!