Detailed explanation of HTML document types

Detailed explanation of HTML document types

Mine is: <!DOCTYPE html>

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

For more information about HTML document types, please visit: http://i.wanz.im/2010/05/28/why_doctype_html/

After checking, I found that JS was getting the visible size of the current page, which was different from the scroll position of the page!
The page contains a 2000*2000 DIV. The data of IE and Chrome test in different HTML document types are as follows:
Standard: <!DOCTYPE html>
Special: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

When the HTML doctype is not added to the HTML, it defaults to a special mode!

Chrome Standards Chrome Specific IE Standards IE Special
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

analyze:

Total page width: document.body.scrollWidth;
Total page height: document.body.scrollHeight;
Chrome page position: document.body.scrollTop; document.body.scrollLeft;
Chrome standard page visible area: document.documentElement.clientWidth; document.documentElement.clientHeight;
Chrome special page visible area: document.body.clientWidth; document.body.clientHeight;
IE standard page position: document.documentElement.scrollTop; document.documentElement.scrollLeft;
IE standard page visible area: document.documentElement.clientWidth; document.documentElement.clientHeight;
IE special page position: document.body.scrollTop; document.body.scrollLeft;
IE special page visible area: document.body.clientWidth; document.body.clientHeight;
The JS code is as follows:

Copy code
The code is as follows:

function getSize() {
var obj = new Object();
obj.allWidth = document.body.scrollWidth;
obj.allHeight = document.body.scrollHeight;
if (-[1, ]) { //non-IE
obj.top = document.body.scrollTop;
obj.left = document.body.scrollLeft;
if (document.compatMode === 'CSS1Compat') {
obj.width = document.documentElement.clientWidth;
obj.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;
obj.top = document.documentElement.scrollTop;
obj.left = document.documentElement.scrollLeft;
}
else {
obj.width = document.body.clientWidth;
obj.height = document.body.clientHeight;
obj.top = document.body.scrollTop;
obj.left = document.body.scrollLeft;
}
}
alert(obj.top);
alert(obj.left);
alert(obj.width);
alert(obj.height);
return obj;
}

Note: The HTML document type of the blog garden homepage is found to be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Why is it different from the essay display page?

Welcome to reprint, please indicate: Reprinted from [ http://www.cnblogs.com/zjfree/ ]

<<:  Tips on HTML formatting and long files for web design

>>:  How to set up cross-domain access in IIS web.config

Recommend

MySQL Oracle and SQL Server paging query example analysis

Recently, I have done a simple study on the data ...

Detailed explanation of CSS style cascading rules

CSS style rule syntax style is the basic unit of ...

MySQL series 6 users and authorization

Table of contents Tutorial Series 1. User Managem...

Several ways to implement 0ms delay timer in js

Table of contents queueMicrotask async/await Mess...

Detailed explanation of the practical record of solving network isolation through Nginx

need Recently, we need to migrate Node online ser...

Solution to the data asymmetry problem between MySQL and Elasticsearch

Solution to the data asymmetry problem between My...

Summary of Vue 3 custom directive development

What is a directive? Both Angular and Vue have th...

Solution to Docker pull timeout

Recently, Docker image pull is very unstable. It ...

Detailed explanation of Docker+Jenkins+Gitlab+Django application deployment practice

1. Background In the context of rapid updates and...

In-depth explanation of MySQL isolation level and locking mechanism

Table of contents Brief description: 1. Four char...

How to reset the root password in mysql8.0.12

After installing the database, if you accidentall...

MySQL query method with multiple conditions

mysql query with multiple conditions Environment:...

How is a SQL statement executed in MySQL?

Table of contents 1. Analysis of MySQL architectu...

Complete steps to configure basic user authentication at the Nginx level

Preface Application scenario: probably the intern...

40 web page designs with super large fonts

Today's web designs tend to display very larg...