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

Einführung in das Fokuselement document.activeELEment in JavaScript

Inhaltsverzeichnis 1. Der Fokus liegt standardmäß...

JavaScript ermittelt, ob der Browser IE ist

Als Frontend-Entwickler komme ich an den Tücken d...

So erhalten Sie die dynamische Anzahl der verbleibenden Wörter im Textbereich

Ich bin bei der Arbeit auf einen Fall gestoßen, ü...

JavaScript verwendet Canvas zum Zeichnen von Koordinaten und Linien

In diesem Artikel wird der spezifische Code zur V...

Beispielcode zur Implementierung von Follow Ads mit JavaScript

Floating Ads sind eine sehr verbreitete Form der ...

So erstellen Sie Ihre erste React-Seite

Inhaltsverzeichnis Was ist Rract? Hintergrund Rea...

Prinzipielle Beispiele für die vier Netzwerktypen von Docker

Vier Netzwerktypen: Keine: Konfigurieren Sie kein...