Javascript knowledge collection

Source: Internet
Author: User

1. Four browsers explain clientHeight, offsetHeight, and scrollHeight of document. body.

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

ClientHeight
Everyone has no objection to clientHeight and thinks it is the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, generally, the area below the last toolbar to above the status bar is irrelevant to the page content.

OffsetHeight
IE and Opera think offsetHeight = clientHeight + scroll bar + border.
NS and FF hold that offsetHeight is the actual height of the webpage content, which can be smaller than clientHeight.

ScrollHeight
IE and Opera hold that scrollHeight is the actual height of the webpage content, which can be smaller than clientHeight.
NS and FF think that scrollHeight is the height of the webpage 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 hold that both offsetHeight and scrollHeight are the content height of the webpage. However, when the content height of the webpage is less than or equal to clientHeight, the value of scrollHeight is clientHeight, while the value of offsetHeight can be less than clientHeight.
IE and Opera hold that offsetHeight is the clientHeight scroll bar and border in the visible area. ScrollHeight indicates the actual height of the webpage content.

Likewise
The description of clientWidth, offsetWidth, and scrollWidth is the same as above. You only need to change the height to the width.

However
FF has different interpretations of clientHeight in different DOCTYPE, but not in xhtml 1 trasitional. This problem does not exist in other browsers.

2. JS: clientHeight and scrollTop
First, segment data. The values in the following table are document. body. clientHeight/document.doc umentElement. clientHeight.

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

In the combination of html, xhtml, and ie, The clientHeight is almost identical, it can be seen that writing a Javascript script compatible with two page standards of three browsers has a headache.

The judgment method summarized for the moment is as follows:
Var h1 = document. body. clientHeight;
Var h2 = document.doc umentElement. clientHeight;
Var isXhtml = (h2 <= h1 & h2! = 0 )? True: false; // determines whether the Doctype of the current page is Xhtml.
Var body = isXhtml? Document.doc umentElement: document. body;
Alert (body. clientHeight); // the final result is consistent.

ScrollTop:
Document. body. scrollTop + document.doc umentElement. scrollTop

Judging the browser type, this method is quite popular:
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. Summary of methods for obtaining flash objects from js

For IE, FF, and Maxthon, use 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. The execution sequence between code blocks is from top to bottom;
2. When the code is embedded in the Code, the upper-layer code block is executed before the sub-code block is executed. The code is embedded in the code.
It refers to the introduction of one file to another, rather than all the code in the form of document. write.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.