Heim >Web-Frontend >js-Tutorial >js/jquery ruft die Höhe und Breite des sichtbaren Bereichs des Browserfensters sowie den Implementierungscode für die Höhe der Bildlaufleiste ab

js/jquery ruft die Höhe und Breite des sichtbaren Bereichs des Browserfensters sowie den Implementierungscode für die Höhe der Bildlaufleiste ab

高洛峰
高洛峰Original
2017-01-11 09:39:251733Durchsuche

Ermitteln Sie die Höhe und Breite des sichtbaren Bereichs des Browserfensters. Freunde, die die Höhe der Bildlaufleiste benötigen, können darauf verweisen.
Im IE kann die Größe des Browser-Anzeigefensters nur wie folgt ermittelt werden: Kopieren Sie den Code wie folgt:

document.body.offsetWidth 
document.body.offsetHeight

In Browsern, die DOCTYPE deklarieren, können Sie Folgendes verwenden, um die Größe des Browser-Anzeigefensters zu ermitteln : Code Kopieren Sie den Code wie folgt

document.documentElement.clientWidth 
document.documentElement.clientHeight

IE, FF und Safari unterstützen alle diese Methode. Obwohl Opera dieses Attribut unterstützt, gibt es gleichzeitig die Seitengröße zurück, außer IE verwendet diese Methode. Die Informationen werden im Fensterobjekt gespeichert und können mit dem folgenden Code abgerufen werden: Kopieren Sie den Code wie folgt:

window.innerWidth 
window.innerHeight
Ermitteln Sie im Allgemeinen die Größe der gesamten Webseite. Kopieren Sie den Code wie folgt

document.body.scrollWidth 
document.body.scrollHeight
Die Bildschirmauflösung und -höhe werden im Allgemeinen ermittelt. Der Methodencode lautet wie folgt. Kopieren Sie den Code

window.screen.height 
window.screen.width
Um das Beispiel zusammenzufassen

function getViewSizeWithoutScrollbar(){//不包含滚动条 
return { 
width : document.documentElement.clientWidth, 
height: document.documentElement.clientHeight 
} 
} 
function getViewSizeWithScrollbar(){//包含滚动条 
if(window.innerWidth){ 
return { 
width : window.innerWidth, 
height: window.innerHeight 
} 
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
return { 
width : document.documentElement.offsetWidth, 
height: document.documentElement.offsetHeight 
} 
}else{ 
return { 
width : document.documentElement.clientWidth + getScrollWith(), 
height: document.documentElement.clientHeight + getScrollWith() 
} 
} 
}
Die Unterschiede zwischen IE und Firefox lauten wie folgt:

IE6.0, FF1.06+:

clientWidth = width + padding 
clientHeight = height + padding 
offsetWidth = width + padding + border 
offsetHeight = height + padding + border 
IE5.0/5.5: 
clientWidth = width - border 
clientHeight = height - border 
offsetWidth = width 
offsetHeight = height
Angehängt ist die am häufigsten verwendete Methode zum Ermitteln der Breite und Höhe der gesamten Seite (erfordert ein JQuery-Framework). . Kopieren Sie den Code wie folgt

$(document).width() < $(&#39;body&#39;).width() ? $(document).width() : $(&#39;body&#39;).width(); 
$(document).height() < $(&#39;body&#39;).height() ? $(document).height() : $(&#39;body&#39;).height();
alert($(window).height()); //Browser Die Höhe des aktuell sichtbaren Bereichs des Fensters

alert($(document ).height()); //Die Höhe des aktuellen Fensterdokuments des Browsers
alert($(document.body).height());//Browse Die Höhe des aktuellen Fensterdokumentkörpers im Browser
alert($(document.body).outerHeight(true));//Die Gesamthöhe des aktuellen Fensterdokumentkörpers im Browser umfasst den Randpolsterungsrand
alert($(window). width()) ; //Die aktuelle Breite des sichtbaren Fensterbereichs des Browsers
alert($(document).width());//Die aktuelle Breite des Fensterdokumentobjekts des Browsers
alert($(document.body) ).width() );//Die Höhe des Dokumentkörpers des aktuellen Fensters des Browsers
alert($(document.body).outerWidth(true));//Die Gesamtbreite des Dokumentkörpers des aktuellen Fensters des Browsers umfasst den Randpolsterungsrand

alert($(document).scrollTop()); //Ermittelt die vertikale Höhe der Bildlaufleiste nach oben
alert($(document).scrollLeft()); //Ermittelt die Bildlaufleiste nach oben links Die vertikale Breite

Weitere Informationen zu js/jquery zum Ermitteln der Höhe und Breite des sichtbaren Bereichs des Browserfensters sowie des Implementierungscodes für die Höhe der Bildlaufleiste finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn