Detaillierte Erklärung der HTML-Dokumenttypen

Detaillierte Erklärung der HTML-Dokumenttypen

Meines ist: <!DOCTYPE html>

Blog-Garten: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Weitere Informationen zu HTML-Dokumenttypen finden Sie unter: http://i.wanz.im/2010/05/28/why_doctype_html/

Nach der Überprüfung stellte ich fest, dass JS die sichtbare Größe der aktuellen Seite erhielt, die von der Bildlaufposition der Seite abwich!
Die Seite enthält ein 2000 x 2000 DIV. Die Daten des IE- und Chrome-Tests in verschiedenen HTML-Dokumenttypen lauten wie folgt:
Standard: <!DOCTYPE html>
Besonderheit: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Wenn der HTML-Dokumenttyp nicht zum HTML hinzugefügt wird, wird standardmäßig ein spezieller Modus verwendet!

Chrome-Standards Chrome-spezifisch IE-Normen IE Spezial
Dokument.Body.ClientTop; 0 0 0 2
Dokument.Body.ClientLeft; 0 0 0 2
Dokument.Body.Clientbreite; 473 473 471 471
Dokument.Body.ClientHeight; 2000 625 2000 604
Dokument.Body.ScrollTop; 224 289 0 255
Dokument.Body.ScrollLeft; 315 388 0 278
Dokument.Body.ScrollWidth; 2005 2005 2005 2010
Dokument.Body.Scrollhöhe; 2010 2010 2000 2005
Dokument.Body.OffsetTop; 0 0 0 0
Dokument.Body.OffsetLeft; 0 0 0 0
Dokument.Body.OffsetWidth; 473 473 471 492
Dokument.Hauptteil.OffsetHeight; 2000 2000 2000 625
Dokument.documentElement.clientTop; 0 0 0 0
Dokument.documentElement.clientLeft; 0 0 0 0
Dokument.Dokumentelement.Clientbreite; 473 473 471 0
Dokument.Dokumentelement.Clienthöhe; 625 2010 604 0
Dokument.documentElement.scrollTop; 0 0 199 0
Dokument.documentElement.scrollLeft; 0 0 241 0
Dokument.Dokumentelement.Scrollbreite; 2005 2005 2005 492
Dokument.Dokumentelement.Scrollhöhe; 2010 2010 2010 625
Dokument.Dokumentelement.OffsetTop; 0 0 0 0
Dokument.Dokumentelement.OffsetLeft; 0 0 0 0
Dokument.Dokumentelement.OffsetWidth; 473 473 492 492
Dokument.Dokumentelement.OffsetHeight; 2010 2010 625 625

analysieren:

Gesamte Seitenbreite: document.body.scrollWidth;
Gesamtseitenhöhe: document.body.scrollHeight;
Chrome-Seitenposition: document.body.scrollTop; document.body.scrollLeft;
Sichtbarer Bereich der Chrome-Standardseite: document.documentElement.clientWidth; document.documentElement.clientHeight;
Sichtbarer Bereich der speziellen Chrome-Seite: document.body.clientWidth; document.body.clientHeight;
Standardseitenposition im IE: document.documentElement.scrollTop; document.documentElement.scrollLeft;
Sichtbarer Bereich der IE-Standardseite: document.documentElement.clientWidth; document.documentElement.clientHeight;
Spezielle Seitenposition im IE: document.body.scrollTop; document.body.scrollLeft;
Sichtbarer Bereich für spezielle IE-Seiten: document.body.clientWidth; document.body.clientHeight;
Der JS-Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

Funktion getSize() {
var obj = neues Objekt();
obj.allWidth = Dokument.Body.ScrollWidth;
obj.allHeight = Dokument.Body.ScrollHeight;
if (-[1, ]) { //nicht-IE
obj.top = Dokument.Body.scrollTop;
obj.left = Dokument.Body.scrollLeft;
wenn (document.compatMode === 'CSS1Compat') {
obj.width = Dokument.Dokumentelement.Clientbreite;
obj.Höhe = Dokument.Dokumentelement.ClientHöhe;
}
anders {
obj.width = Dokument.Body.ClientWidth;
obj.height = Dokument.Body.ClientHeight;
}
} anders {
wenn (document.compatMode === 'CSS1Compat') {
obj.width = Dokument.Dokumentelement.Clientbreite;
obj.Höhe = Dokument.Dokumentelement.ClientHöhe;
obj.top = Dokument.Dokumentelement.scrollTop;
obj.left = Dokument.documentElement.scrollLeft;
}
anders {
obj.width = Dokument.Body.ClientWidth;
obj.height = Dokument.Body.ClientHeight;
obj.top = Dokument.Body.scrollTop;
obj.left = Dokument.Body.scrollLeft;
}
}
Alarm (Objekt oben);
Alarm (Objekt links);
Alarm (Objektbreite);
Alarm (Objekthöhe);
gibt Objekt zurück;
}

Hinweis: Der HTML-Dokumenttyp der Blog-Garten-Homepage lautet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Warum unterscheidet es sich von der Aufsatzanzeigeseite?

Willkommen beim Nachdruck. Bitte geben Sie an: Nachdruck von [ http://www.cnblogs.com/zjfree/ ]

<<:  Tipps zur HTML-Formatierung und langen Dateien für das Webdesign

>>:  So richten Sie domänenübergreifenden Zugriff in IIS web.config ein

Artikel empfehlen

Austausch von Forschungserfahrungen zur Verwendung von Zeichen anstelle von abgerundeten und scharfen Ecken

1. Die Beziehung zwischen Schriftarten und Zeiche...

Tutorial zur Installation von RabbitMQ mit Yum auf CentOS8

Geben Sie den Ordner /etc/yum.repos.d/ ein Erstel...

Eine kurze Erläuterung, wie Tomcat den übergeordneten Delegationsmechanismus unterbricht

Inhaltsverzeichnis JVM-Klassenlader Tomcat-Klasse...

Beispiel für die Implementierung eines hohlen Dreieckpfeils und eines X-Symbols mit anschließendem Pseudoelement

Im Frontend-Designentwurf sieht man oft Schließen...

Detaillierte Erklärung zur Verwendung des Feldsatzes und der Legende für seltene Tags

Was <fieldset> und <legend> betrifft,...

So verwenden Sie Lazy Loading in React, um die Ladezeit des ersten Bildschirms zu verkürzen

Inhaltsverzeichnis verwenden Installieren Wie wir...

5 Schritte zur Implementierung der Responsive Webdesign-Methode und zum Abschied vom Wasserfallmodell (Grafik-Tutorial)

Herzlichen Glückwunsch, dass Sie Ihren Chef endli...

Schritt-für-Schritt-Anleitung zur Installation von VMware Workstation und des Betriebssystems WIN10 zur Verbindung mit dem externen Netzwerk (sehr ausführliches Tutorial)

Laden Sie zuerst die Version 15.1 von VMware Work...

JavaScript zum Erzielen eines dynamischen Tabelleneffekts

In diesem Artikel wird der spezifische Code für J...

Implementierung der MySQL Master-Slave-Statusprüfung

1. Überprüfen Sie den Synchronisierungsstatus der...

CSS imitiert Fernbedienungstasten

Hinweis: Diese Demo wurde in der Miniprogrammumge...

Detailliertes Tutorial zur Installation von VirtualBox und Ubuntu 16.04 unter Windows

1. Software-Einführung VirtualBox VirtualBox ist ...

Automatisches Laden des Kernelmodul-Overlayfs-Vorgangs beim CentOS-Start

Um Kernelmodule in CentOS automatisch zu laden, k...

Sechs Möglichkeiten, die Größe von Docker-Images zu reduzieren

Seitdem ich 2017 mit der Arbeit an Vulhub begonne...

Beispiele für optimistisches und pessimistisches Sperren in MySQL

Die Aufgabe der Parallelitätskontrolle in einem D...