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

Beispielcode von layim zum Integrieren des Rechtsklickmenüs in JavaScript

Inhaltsverzeichnis 1. Wirkungsdemonstration 2. Im...

Diagramm des Bereitstellungs- und Installationsprozesses in der Java+Tomcat-Umgebung

Als nächstes werde ich Java+Tomcat auf Centos7 in...

Beispielmethode zum Anzeigen der mit MySQL verbundenen IP-Adresse

Spezifische Methode: Öffnen Sie zuerst die Eingab...

Lösung für das 404/503-Problem beim Anmelden bei TeamCenter12

TeamCenter12 gibt das Kontokennwort ein und klick...

Docker-Konfiguration Alibaba Cloud Container Service-Betrieb

Konfigurieren des Alibaba Cloud Docker Container ...

Lösung zum Vergessen des MySQL-Root-Passworts in MACOS

MySQL ist ein relationales Datenbankverwaltungssy...

Drei gängige Stilselektoren in HTML-CSS

1: Tag-Selektor Der Tag-Selektor wird für alle Ta...

Detaillierte Erklärung der Lösung für das beim Start hängengebliebene Ubuntu-Dualsystem

Lösung für das Problem, dass das Ubuntu-Dualsyste...

So verwenden Sie .htaccess, um einer bestimmten IP den Zugriff auf die Website zu verbieten

Vorwort Aus Kostengründen kaufen die meisten Webm...

Beispielcode zur Implementierung eines Karten-Wasserfall-Layouts mit CSS3-Spalten

In diesem Artikel wird der Beispielcode einer CSS...

Docker ändert die Konfigurationsinformationen eines nicht gestarteten Containers

Als ich Docker zum ersten Mal verwendete, habe ic...

Detaillierte Erklärung des Befehls mkdir beim Linux-Lernen

Inhaltsverzeichnis Vorwort 1. Grundkenntnisse zu ...

Detaillierte Analyse von Javascript-Datenproxys und Ereignissen

Inhaltsverzeichnis Datenbroker und Events Überprü...

Analyse des Unterschieds zwischen absolutem und relativem Pfad in HTML

Wie in der Abbildung gezeigt: Mit einer einzelnen ...

Vues Render-Funktion

Inhaltsverzeichnis 1. Knoten, Bäume und virtuelle...