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

Django online deployment method of Apache

environment: 1. Windows Server 2016 Datacenter 64...

Vue implements fuzzy query-Mysql database data

Table of contents 1. Demand 2. Implementation 3. ...

Detailed tutorial on installing Docker on CentOS 8.4

Table of contents Preface: System Requirements: I...

MySQL tutorial on how to deploy multiple instances on a single machine using mysqld_multi

Table of contents 1. MySQL compilation and instal...

Zen Coding Easy and fast HTML writing

Zen Coding It is a text editor plugin. In a text ...

SQL implementation of LeetCode (182. Duplicate mailboxes)

[LeetCode] 182.Duplicate Emails Write a SQL query...

The data folder failed to be created automatically during the installation of mysql8.0.14.zip. The service cannot be started.

After reinstalling the system today, I reinstalle...

How to use the href attribute of the HTML a tag to specify relative and absolute paths

In actual Web development, inserting images, incl...

How to deploy a simple c/c++ program using docker

1. First, create a hello-world.cpp file The progr...

Front-end performance optimization - the pain points that front-end engineers have to talk about

Preface <br />In the previous article "...

Steps to use autoconf to generate Makefile and compile the project

Preface Under Linux, compilation and linking requ...

Detailed explanation of template tag usage (including summary of usage in Vue)

Table of contents 1. Template tag in HTML5 2. Pro...

How much data can be stored in a MySQL table?

Programmers must deal with MySQL a lot, and it ca...

MySQL 5.7.13 source code compilation, installation and configuration method graphic tutorial

Installation environment: CentOS7 64-bit MINI ver...

Which scenarios in JavaScript cannot use arrow functions

Table of contents 1. Define object methods 2. Def...