Practical javascript code snippets

In the Javascript project development process, some short and precise functional functions can always solve some problems, or inspire developers to write more powerful programs. So here, I sort out some beautiful functions that I usually use or see in different categories, which can be considered as code snippets for future searching and learning.

Bind multiple JavaScript Functions to the onload event handler

Function addLoadEvent (func ){
Var oldonload = window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = func;
} Else {
Window. onload = function (){
Oldonload ();
Func ();
}
}
}

Function for retrieving the true and final CSS style attribute values of Elements

// Obtain the style attribute (name) of the specified Element (elem)
Function getStyle (elem, name ){
// If the attribute exists in style [], it is already set (and current)
If (elem. style [name])
Return elem. style [name];
// Otherwise, try the IE Method
Else if (elem. currentStyle)
Return elem. currentStyle [name];
// W3C Method
Else if (document. defaultView & document. defaultView. getComputedStyle ){
// It uses general 'text-align 'style rules instead of 'textign'
Name = name. replace (/({A-Z})/g, "-$1 ");
Name = name. toLowerCase ();
// Obtain the style object and obtain the attribute (if any) Value
Var s = document. defaultView. getComputedStyle (elem ,"");
Return s & s. getPropertyValue (name );
// Otherwise, other browsers are used.
} Else
Return null;
}

Element location

Auxiliary functions used to determine the position of an element relative to x and y of the entire document:

Function pageX (elem ){
Return elem. offsetParent?
// If you can continue to obtain the previous element, increase the current offset and continue the upward Recursion
Elem. offsetLeft + pageX (elem. offsetParent ):
// Otherwise, obtain the current offset
Elem. offsetLeft;
}
Function pageY (elem ){
Return elem. offsetParent? Elem. offsetTop + pageY (elem. offsetParent): elem. offsetTop;
}

Function for determining the position of an element relative to the parent label:

// Obtain the horizontal position of the element relative to the parent label
Function parentX (elem ){
// If offsetParent is the parent tag of an element, exit early.
Return elem. parentNode = elem. offsetParent?
Elem. offsetLeft:
// Otherwise, find the parent of the element and the element relative to the entire page and calculate their difference
PageX (elem)-pageX (elem. parentNode );
}

// Obtain the vertical position of the element relative to the parent label
Function parentY (elem ){
Return elem. parentNode = elem. offsetParent? Elem. offsetTop: pageY (elem)-pageY (elem. parentNode );
}

Function for setting the positions of elements x and y:

// Sets the horizontal position of an element.
Function setX (elem, pos ){
Elem. style. left = pos + "px ";
}

// Sets the vertical position of an element.
Function setY (elem, pos ){
Elem. style. top = pos + "px ";
}

Adjust the distance between the element and the current position:

// Increase the distance at the horizontal position of the element
Function addX (elem, pos ){
SetX (posX (elem) + pos );
}
// Add a distance to the vertical position of the element
Function addY (elem, pos ){
SetY (posY (elem) + pos );
}

Element size

Obtains the current height and width of an element.

Code
Function getHeight (elem ){
Return parseInt (getStyle (elem, 'height '));
}

Function getWidth (elem ){
Return parseInt (getStyle (elem, 'width '));
}

Even if the element is hidden, two functions of its potential complete height and width can be obtained respectively.

Code
Function fullHeight (elem ){
// If the element is displayed, use offsetHeight to obtain the height. If there is no offsetHeight, use getHeight ()
If (getStyle (elem, 'display ')! = 'None ')
Return elem. offsetHeight | getHeight (elem );
// Otherwise, the element whose display is None must be processed, so reset its css attribute to get a more accurate reading.
Var old = resetCSS (elem, {display: '', visibility: 'den den ', position: 'absolute '});
// Use clientHeight to find the complete height of the element. If it does not take effect, use the getHeight function.
Var h = elem. clientHeight | getHeight (elem );
// Restore the original CSS attributes
RestoreCSS (elem, old );
// Returns the complete height of the element.
Return h;
}

Function fullWidth (elem ){
If (getStyle (elem, 'display ')! = 'None ')
Return elem. offsetWidth | getWidth (elem );
Var old = resetCSS (elem, {display: '', visibility: 'den den ', position: 'absolute '});
Var w = elem. clientHeight | getWidth (elem );
RestoreCSS (elem, old );
Return w;
}
}

The function that sets a set of CSS attributes can be restored to the original settings; the function that restores the original CSS attributes to prevent the side effects of the resetCSS Function

Code
Function resetCSS (elem, prop ){
Var old = {};
For (var I in prop ){
// Record the old property value
Old [I] = elem. style [I];
// Set a new value
Elem. style [I] = prop [I];
}
// Returns a set of changed values, reserved for use by the restoreCSS Function
Return old;
}

Function restoreCSS (elem, prop ){
// Reset all attributes and restore their original values
For (var I in prop)
Elem. style [I] = prop [I];
}