JavaScript knowledge point collection_basic knowledge

1. The interpretation of clientHeight, offsetHeight and scrollHeight of document.body by four browsers.

The four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).

clientHeight
No one has any objection to clientHeight. They all think it is the height of the visible area of ​​the content, which means the height of the area where the content can be seen in the page browser. It is usually the last tool. The area below the bar to above the status bar has nothing to do with the page content.

offsetHeight
IE and Opera believe that offsetHeight = clientHeight scroll bar border.
NS and FF believe that offsetHeight is the actual height of the web page content, which can be smaller than clientHeight.

scrollHeight
IE and Opera believe that scrollHeight is the actual height of the web page content and can be smaller than clientHeight.
NS and FF believe that scrollHeight is the height of the web page content, but the minimum value is clientHeight.

Simply put
clientHeight is the height of the area where the content is viewed through the browser.
NS and FF believe that offsetHeight and scrollHeight are both web content heights, but when the web content height is less than or equal to clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be less than clientHeight.
IE and Opera believe that offsetHeight is the visible area clientHeight scroll bar plus border. scrollHeight is the actual height of the web page content.

Similarly
The explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.

But
FF has different interpretations of clientHeight in different DOCTYPEs, but it is not explained as above in xhtml 1 trasitional. Other browsers do not have this problem.


2.JS takes clientHeight and scrollTop
First come to the data. The values ​​in the following table are document.body.clientHeight / document.documentElement.clientHeight

IE FF
Html 608/0 630/11096
Xhtml 10942/591 11076/630

Under the four permutations and combinations of html/xhtml and ie/ff, the clientHeight obtained is almost no Similarly, it can be seen that it is a headache to write a js script that is compatible with three browsers and two page standards.

The temporary summary judgment method is as follows:
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2var body = isXhtml?document.documentElement:document.body;
alert(body.clientHeight); //The final result is relatively consistent

Safely get scrollTop:
document.body.scrollTop document.documentElement.scrollTop

Determine the browser type. I like this way of writing:
var ua = navigator .userAgent.toLowerCase ();
var os = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf (" opera") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;


3.js obtained Summary of flash object methods

IE, FF, Maxthon uses document.getElementById(id)
Opera uses document.embeds(id)

var isOpera=(window.opera&&navigator. userAgent.match(/opera/gi))?true:false;

if(isOpera){
var oswf = document.embeds('ad_flipper_swf');
}else{
var oswf = document.getElementById('ad_flipper_swf');
}


4.js execution sequence
1. Different code blocks at the same level, code The order of execution between blocks is from top to bottom;
2. When the code is embedded in the code, the upper code block is executed first, and then the sub-code block is executed; embedded code in the code
means that one file introduces another A file, not all the code typed through document.write.