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

Spezifische Verwendung der ES6-Array-Kopier- und Füllmethoden copyWithin() und fill()

Inhaltsverzeichnis Stapelkopie copyWithin() Array...

Detaillierte Erklärung von Objektliteralen in JS

Inhaltsverzeichnis Vorwort 1. Setzen Sie den Prot...

Tutorial zur Installation und Konfiguration einer virtuellen Linux-Maschine unter dem Windows-Betriebssystem

Vorwort Bei der Arbeit müssen wir häufig in einer...

jQuery zum Erzielen eines gleitenden Treppeneffekts

In diesem Artikel wird der spezifische Code von j...

XHTML-Einführungstutorial: Verwendung von Listen-Tags

Listen werden verwendet, um eine Reihe ähnlicher o...

MySQL verwendet die Partitionsfunktion, um eine horizontale Partitionierungsstrategie zu implementieren

Inhaltsverzeichnis 1 Bewertung 2 Fünf Strategien ...

Tipps zum Erstellen von Webseiten für Mobiltelefone

Angesichts der Tatsache, dass mittlerweile viele M...

Detaillierte Erläuterung der MySQL Master-Slave-Datenbankkonstruktionsmethode

Dieser Artikel beschreibt, wie man eine MySQL Mas...

So verwenden Sie crontab zum Hinzufügen geplanter Aufgaben in Linux

Vorwort Das Linux-System wird durch den Systemdie...

Lassen Sie sich die tiefe Kopie von js verstehen

Inhaltsverzeichnis js tiefe Kopie Methode der Dat...

So fügen Sie Nginx zu den Systemdiensten in CentOS7 hinzu

Einführung Nach dem Kompilieren, Installieren und...

Installation und Bereitstellung des Linux-Tools Nethogs zur Überwachung der Netzwerkbandbreite nach Prozess

Überblick Es gibt viele Open-Source-Tools zur Net...

Spezifische Verwendung des Linux-Man-Befehls

01. Befehlsübersicht Linux bietet ein umfangreich...

XHTML verwendet einige veraltete Elemente in HTML nicht mehr

Wenn wir CSS-Webseitenlayouts erstellen, wissen wi...

So finden Sie langsame SQL-Anweisungen in MySQL

Wie finde ich langsame SQL-Anweisungen in MySQL? ...