Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der HTML-Dokumenttypen Empfohlene_HTML/Xhtml_Webseitenproduktion

Detaillierte Erläuterung der HTML-Dokumenttypen Empfohlene_HTML/Xhtml_Webseitenproduktion

WBOY
WBOYOriginal
2016-05-16 16:41:411338Durchsuche

Meins ist:

Blog Park:

Informationen zur HTML-Dokumenttypreferenz: http://i.wanz.im/2010/05/28/why_doctype_html/

Ich habe nachgesehen und festgestellt, dass es einen Unterschied zwischen der von JS erhaltenen visuellen Größe der aktuellen Seite und der Bildlaufposition der Seite gibt!
Die Seite enthält ein 2000*2000 DIV. Die von IE und Chrome für verschiedene HTML-Dokumenttypen zusammengestellten Daten sind wie folgt:
Standard:
Spezial:

Wenn der HTML-Dokumenttyp nicht zu HTML hinzugefügt wird, wird standardmäßig der Spezialmodus verwendet!

Chrome标准 Chrome特殊 IE标准 IE特殊
document.body.clientTop; 0 0 0 2
document.body.clientLeft; 0 0 0 2
document.body.clientWidth; 473 473 471 471
document.body.clientHeight; 2000 625 2000 604
document.body.scrollTop; 224 289 0 255
document.body.scrollLeft; 315 388 0 278
document.body.scrollWidth; 2005 2005 2005 2010
document.body.scrollHeight; 2010 2010 2000 2005
document.body.offsetTop; 0 0 0 0
document.body.offsetLeft; 0 0 0 0
document.body.offsetWidth; 473 473 471 492
document.body.offsetHeight; 2000 2000 2000 625
document.documentElement.clientTop; 0 0 0 0
document.documentElement.clientLeft; 0 0 0 0
document.documentElement.clientWidth; 473 473 471 0
document.documentElement.clientHeight; 625 2010 604 0
document.documentElement.scrollTop; 0 0 199 0
document.documentElement.scrollLeft; 0 0 241 0
document.documentElement.scrollWidth; 2005 2005 2005 492
document.documentElement.scrollHeight; 2010 2010 2010 625
document.documentElement.offsetTop; 0 0 0 0
document.documentElement.offsetLeft; 0 0 0 0
document.documentElement.offsetWidth; 473 473 492 492
document.documentElement.offsetHeight; 2010 2010 625 625

Analyse:

Gesamtseitenbreite: document.body.scrollWidth;
Gesamtseitenhöhe: document.body.scrollHeight;
Chrome-Seitenposition: document.body.scrollTop; document.body.scrollLeft;
Chrome-Standard Sichtbarer Bereich der Seite: document.documentElement.clientWidth; document.documentElement.clientHeight;
Sichtbarer Bereich der Chrome-Spezialseite: document.body.clientWidth;
IE-Standardseitenposition: document.documentElement .scrollTop ; document.documentElement.scrollLeft;
IE-Standardseite sichtbarer Bereich: document.documentElement.clientWidth;
IE-Sonderseitenposition: document.body.scrollTop;
Sichtbarer Bereich der IE-Sonderseite: document.body.clientWidth; document.body.clientHeight;
Der JS-Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

function getSize() {
var obj = new Object(
obj.allWidth = document.body.scrollWidth;
obj.allHeight = document.body.scrollHeight;
if (-[1, ]) { //Nicht-IE
obj.top = document. body.scrollTop;
obj.left = document.body.scrollLeft;
if (document.compatMode === 'CSS1Compat') {
obj.width = document.documentElement.clientWidth; .height = document.documentElement .clientHeight;
else {
obj.width = document.body.clientWidth;
obj.height = document.body.clientHeight; >} else {
if (document.compatMode === 'CSS1Compat') {
obj.width = document.documentElement.clientWidth;
obj.height = document.documentElement.clientHeight; .top = document.documentElement .scrollTop;
obj.left = document.documentElement.scrollLeft;
else {
obj.width = document.body.clientWidth; = document.body.clientHeight ;
obj.top = document.body.scrollTop;
obj.left = document.body.scrollLeft; ;
alert( obj.left);
alert(obj.height);
return obj; Hinweis: Homepage von Discovery Blog Park Der HTML-Dokumenttyp ist:

Warum unterscheidet es sich von der Aufsatz-Anzeigeseite?

Willkommen zum Nachdruck, bitte geben Sie an: Nachdruck von [ http://www.cnblogs.com/zjfree/ ]
Stellungnahme:
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