javascript document.compatMode compatibility_javascript tips

IE's rendering of the box model is very different between Standards Mode and Quirks Mode. The interpretation of the box model in Standards Mode is the same as that of other standard browsers, but there is a big difference in Quirks Mode. Without declaring Doctype, IE defaults to Quirks Mode. So for compatibility reasons, we may need to obtain the current document rendering method.

document.compatMode comes in handy, it has two possible return values: BackCompat and CSS1Compat.

BackCompat: Standard compatibility mode is turned off. The width of the browser client area is document.body.clientWidth; CSS1Compat: standards compatibility mode is turned on. The browser client area width is document.documentElement.clientWidth.

Then I wrote a code to accurately obtain the width and height of the client area of ​​the web page, the width and height of the scroll bar, the left and top of the scroll bar:

Copy code The code is as follows:

if (document.compatMode == "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document. body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}