Summary of common JavaScript scripts (iii) _ javascript skills

The common scripts shared in this article are through arrays, extended String concatenation may easily cause performance problems, auxiliary functions for the position of the page scroll bar, functions for adjusting the transparency of elements, common functions for obtaining the mouse position, and element visibility Switching Using the cssdisplay attribute A group of functions, general style functions, and get the current height and width of the element. Extended String concatenation through Arrays can easily cause performance problems

The Code is as follows:

Function StringBuffer (){
This. _ strings _ = new Array ();
}
StringBuffer. prototype. append = function (str ){
This. _ strings _. push (str );
Return this;
}
StringBuffer. prototype. toString = function (){
Return this. _ strings _. join ("");
}
Var buffer = new StringBuffer ();
Buffer. append ("Hello"). append ("javascript ");
Var result = buffer. toString ();
Alert (result); // Hello javascript

Code Source: https://gist.github.com/hehongwei44/fe71f10e4d2d9295aeab

Auxiliary Function for the position of the page's scroll bar

The Code is as follows:

/* Determine the two functions of the current page height and width */
Function pageHeight (){
Return document. body. scrollHeight;
}
Function pageWidth (){
Return document. body. scrollWidth;
}
/* Determine the horizontal and vertical positions of the scroll bar */
Function scrollX (){
Var de = document.doc umentElement;
Return self. pageXOffset | (de & de. scrollLeft) | document. body. scrollLeft;
}
Function scrollY (){
Var de = document.doc umentElement;
Return self. pageYOffset | (de & de. scrollTop) | document. body. scrollTop;
}
/* Determine the two functions of the height and width of the browser view */
Function compute wheight (){
Var de = document.doc umentElement;
Return self. innerHeight | (de & de. clientHeight) | document. body. clientHeight;
}
Function compute wwidth (){
Var de = document.doc umentElement;
Return self. innerWidth | (de & de. clientWidth) | document. body. clientWidth;
}

Code Source: https://gist.github.com/hehongwei44/62907b9b7061d4defadb

Function for adjusting the transparency of Elements

The Code is as follows:

/* Function for adjusting the transparency of elements */
Function setOpacity (elem, level ){
// IE processing transparency
If (elem. filters ){
Elem. style. filters = 'Alpha (opacity = '+ level + ')';
} Else {
Elem. style. opacity = level/100;
}
}

Code Source: https://gist.github.com/hehongwei44/87839cd3b8439aff6a3c

Obtain common functions of the mouse position

The Code is as follows:

/* Two common functions are used to obtain the current position of the mouse relative to the entire page */
Function getX (e ){
E = e | window. event;
Return e. pageX | e. clientX + document. body. scrollLeft;
}
Function getY (e ){
E = e | window. event;
Return e. pageY | e. clientY + document. body. scrollTop;
}
/* Two functions for getting the cursor's position relative to the current element */
Function getElementX (e ){
Return (e & e. layerX) | window. event. offsetX;
}
Function getElementY (e ){
Return (e & e. layerY) | window. event. offsetY;
}

Code Source: https://gist.github.com/hehongwei44/2732365bd42baa491ef8

A group of functions that use the cssdisplay attribute to switch element visibility

The Code is as follows:

/**
* Functions that use display to hide Elements
**/
Function hide (elem ){
Var curDisplay = getStyle (elem, 'display ');

If (curDisplay! = 'None '){
Elem. $ oldDisplay = curDisplay;
}
Elem. style. display = 'none ';
}
/**
* Functions that use display to display elements
**/
Function show (elem ){
Elem. style. display = elem. $ oldDisplay | '';
}

Code Source: https://gist.github.com/hehongwei44/b4192af8227d756bfda6

General style functions

The Code is as follows:

/**
* Get the style attribute (name) of the specified Element (elem)
**/
Function getStyle (elem, name ){
// If it exists in style [], it has been set (and is current)
If (elem. style [name]) {
Return elem. style [name];
}
// Otherwise, test the IE Method
Else if (elem. currentStyle ){
Return elem. currentStyle [name];
}
// Or W3C Method
Else if (document. defaultView & document. defaultView. getComputedStyle ){
Name = name. replace (/(A-Z)/g, "-$1 ");
Name = name. toLowerCase ();
Var s = document. defaultView. getComputedStyle (elem ,"");
Return s & s. getPropertyValue (name );
}
// Otherwise, the user uses other browsers
Else {
Return null;
}
}

Code Source: https://gist.github.com/hehongwei44/9abf63536accd0f2eeb7

Obtains the current height and width of an element.

The Code is as follows:

/**
* Obtain the true height of an element.
* For the dependent getStyle, see the above function.
**/
Function getHeight (elem ){
Return parseInt (getStyle (elem, 'height '));
}
/**
* Obtain the true width of an element.
* For the dependent getStyle, see the above function.
**/
Function getWidth (elem ){
Return parseInt (getStyle (elem, 'width '));
}

Code Source: https://gist.github.com/hehongwei44/b524ff25991d99625eb2

The above are common javascript scripts shared in this article. I hope you will like them.