JavaScript Learning notes-1

Learning JavaScript has been a while, but some commonly used JS methods are always easy to confuse, and now try to write on the blog, hoping to strengthen their understanding of JavaScript and memory.

1. Get the width and height of the viewable area of the browser

Width: document.documentElement.clientWidth;

High: Document.documentElement.clientHeight;

Note: DocumentElement is not something new, it is an HTML tag in an HTML document; ClientWidth is the visual width of the specified object; some old browsers may not support documentelement objects, and after object detection, Then change the documentelement to body object.

Memory method: The Window object refers to the entire browser, the window object has a lot of objects, including the Document object, and the Document object's representative area is we often see the page display window, that is, the HTML tag jurisdiction of the area (personal opinion, such as wrong Thank you! ), then use ClientWidth to get the size of the page display window.

2. Get the scroll distance of the horizontal/vertical scroll bar

Transverse: document.documentElement.scrollLeft;

longitudinal: document.documentElement.scrollTop;

Note: Scrolling distance refers to the portion of the scroll that is scrolled by dragging the scrollbar

3. Gets the offset distance of the relative document for the specified element

Top offset: $ (' nav '). Offset (). Top;

Left offset: $ (' nav '). Offset ().

4. Get the width height of the specified element (excluding border, etc.)

Width: $ (' nav '). width ();

High: $ (' nav '). Height ();

5. Get the width height of the specified element (including border, etc.)

Width: $ (' nav '). Outerwidth ();

High: $ (' nav '). Outerheight ();

JavaScript Learning notes-1