Javascript and CSS Review (3) _ javascript skills

Well, it became a trilogy. This is the last part about the mouse and Some Properties displayed on the browser itself. Let's take a look at how to get the cursor position relative to the entire page, because the cursor position variable x and y are generally obtained through mouse events (such as mousemove or mousedown), the following two common functions, obtains the current position of the cursor relative to the entire page.

The Code is as follows:

// Obtain the horizontal position of the cursor
Function getX (e ){
// Universal event object
E = e | window. event;
// Check the location of the non-IE browser before checking the location of IE
Return e. pageX | e. clientX + document. body. scrollLeft;
}

// Obtain the vertical position of the cursor
Function getY (e ){
// Universal event object
E = e | window. event;
// Check the location of the non-IE browser before checking the location of IE
Return e. pageY | e. clientY + document. body. scrollTop;
}

E. pageX is the X coordinate of the entire page (including the scroll distance of the scroll bar), and E. clientX indicates the X coordinate of the current view displayed in front of the user, and adds document. body. scrollLeft is the complete X coordinate position.
The following concept is the viewport, which can be seen as everything in the browser's scroll bar. Some components of a view are the View window, page, and scroll bar.
Obtain the page size:

The Code is as follows:

// Return the height of the page (it may change when content is added)
Function pageHeight (){
Return document. body. scrollHeight;
}
// Return the page width
Function pageWidth (){
Return document. body. scrollWidht;
}

ScrollHeight and scrollWidth (click to View Details) Describe the potential width and height of the element, not just the current size.
Next, we need to get the position of the scroll bar, that is, the distance between the page and the top of the view.

The Code is as follows:

// Function used to determine the horizontal scroll position of the browser
Function scrollX (){
// A shortcut, used in strict IE6/7 Mode
Var de = document.doc umentElement;
// If the browser has the pageXOffset attribute, use it
Return self. pageXOffset |
// Otherwise, try to get the left-side scroll offset of the Root Node
(De & de. scrollLeft) |
// Finally, try to get the left-side scroll offset of the body element.
Document. body. scrollLeft;
}

// Determines the vertical scroll position of the browser.
Function scrollY (){
// A shortcut, used in strict IE6/7 Mode
Var de = document.doc umentElement;
// If the browser has the pageYOffset attribute, use it
Return self. pageYOffset |
// Otherwise, try to get the top scroll offset of the Root Node
(De & de. scrollTop) |
// Finally, try to get the top scroll offset of the body element
Document. body. scrollTop;
}

Next let's take a look at how to move the scroll bar. We can use the scrollTo method, which exists as an attribute of the window object. It has two parameters, that is, the offset of x and y, you can scroll to the specified position in the view. Two examples are as follows:

The Code is as follows:

// If You Need to scroll to the top of the browser, you can do this.
Window. scrollTo (0, 0)

// If You Want to scroll to the specified element, you can
Window. scrollTo (0, pageY (document. getElementById ('content ')));

If you are not familiar with the pageY function, you can go back and review it to obtain the position of the element in the entire document and give it again so that you can consolidate it.

The Code is as follows:

// Obtain the Y position of the element
Function pageY (elem ){
// Check whether we are in the root element
Return elem. offsetParent?
// If we can continue to get the previous element, increase the current offset and continue to recursion
Elem. offsetTop + pageY (elem. offsetParent ):
// Otherwise, obtain the current offset
Elem. offsetTop;
}

Next we will learn how to get the size of the viewport and how much content you can see at present.

The Code is as follows:

// Obtain the height of the view.
Function compute wheight (){
// A shortcut, used in strict IE6/7 Mode
Var de = document.doc umentElement;
// If the browser has the innerHeight attribute, use it
Return self. innerHeight |
// Otherwise, try to get the root node height
(De & de. clientHeight) |
// Finally, try to get the height of the body element
Document. body. clientHeight;
}

// Obtain the width of the view.
Function compute wwidth (){
// A shortcut, used in strict IE6/7 Mode
Var de = document.doc umentElement;
// If the browser has the innerWidth attribute, use it
Return self. innerWidth |
// Otherwise, try to get the root node width
(De & de. clientWidth) |
// Finally, try to get the width of the body element
Document. body. clientWidth;
}

You may have some questions about attributes such as innerHeight and clientHeight. Click it and the Mozilla Developer center will explain it clearly.

Finally speaking of a more interesting effect, now the web Front-end is also very popular -- "drag", the author did not give a specific implementation, but cited a good js library, dom-drag.js, you can learn the source code of the experts and introduce several popular js libraries. jquery is also included. Now we have reviewed javascript and css. If you have any questions, please leave a message.