Heim > Web-Frontend > js-Tutorial > Hauptteil

js ruft die verschiedenen Breiten und Höhen des Browsers und Bildschirms ab

高洛峰
Freigeben: 2017-02-23 17:15:07
Original
2175 Leute haben es durchsucht

1: Breite und Höhe des sichtbaren Bereichs der Webseite, ohne Symbolleisten und Bildlaufleisten (Größe des sichtbaren Bereichs des Browserfensters)

1. Für IE9+, Chrome, Firefox, Opera, Safari:

window.innerHeight Die innere Höhe des Browserfensters; window.innerWidth Die innere Breite des Browserfensters;

2. Für IE8.7.6.5:document.documentElement.clientHeight: Gibt die aktuelle Höhe des Fensters an, in dem sich das HTML-Dokument befindet;

document.documentElement.clientWidth: Gibt die aktuelle Breite des Fensters an, in dem sich das HTML-Dokument befindet Das Body-Attribut des Dokumentobjekts entspricht dem -Tag des HTML-Dokuments. Es kann auch wie folgt ausgedrückt werden:

document.body.clientHeight: Stellt die aktuelle Höhe des Fensters dar, in dem sich das HTML-Dokument befindet lokalisiert;

document.body.clientWidth: Stellt die aktuelle Breite des Fensters dar, in dem sich das HTML-Dokument befindet;

Fazit:

document.body.clientWidth/Height: Die Breite und Höhe sind zu klein und die Höhe beträgt sogar standardmäßig 200; document.documentElement.clientWidth/Height und window Die Breite und Höhe von .innerWidth /Höhe sind immer gleich.

Also die Javascript-Lösung, die in verschiedenen Browsern praktisch ist:

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
Nach dem Login kopieren
2: Vollständige Textbreite und -höhe des Webseite

scrollWidth und scrollHeight ermitteln die Höhe und Breite des Webseiteninhalts

1. Für IE.Opera:

scrollHeight ist die tatsächliche Höhe des Webseiteninhalts, die kleiner sein kann als clientHeight;2. Für NS.firefox:

scrollHeight ist die Höhe des Webinhalts, aber der Mindestwert ist clientHeight; das heißt, die tatsächliche Höhe des Webinhalts ist kleiner als clientHeight. Wenn scrollHeight clientHeight zurückgibt; 3. Browser-Kompatibilitätscode:

2: Die Breite und Höhe des sichtbaren Bereichs der Webseite, einschließlich Bildlaufleisten und anderer Kanten (Ändert sich mit der Anzeigegröße des Fensters)

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;
Nach dem Login kopieren

1. Wert:

offsetWidth = scrollWidth + linke und rechte Bildlaufleiste + linker und rechter Rand ; OffsetHeight = scrollHeight + obere und untere Ränder;

2. Browser-Kompatibilitätscode:

3: Abstand und Versatz des Webseiten-Scrollens

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;
Nach dem Login kopieren

1.scrollLeft:

Legen Sie den Abstand zwischen dem linken Rand des angegebenen Objekts und dem äußersten linken Ende des aktuell sichtbaren Inhalts im Fenster fest oder rufen Sie ihn ab

2.scrollTop:Legen Sie den Abstand zwischen der Oberseite des angegebenen Objekts und dem äußersten linken Ende des aktuell sichtbaren Inhalts im Fenster fest oder rufen Sie ihn ab

3.offsetLeft:

Setzen oder die berechnete linke Position des angegebenen Objekts relativ zum Layout oder der durch die Eigenschaft offsetParent angegebenen übergeordneten Koordinate abrufen

4.offsetTop:

Setzt oder ruft das ab berechnete obere Position des angegebenen Objekts relativ zum Layout oder den übergeordneten Koordinaten, die durch das offsetParent-Attribut angegeben werden; Bitte achten Sie auf die chinesische PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage