CSS and HTML skills Summary, click here: the front-end development of some common skills summary, you can also go to Lange blog, to see by Taobao Ued finishing the front-end tips:http://www.12sui.cn/category/css/.
1. Shorthand for document.getElementById: http://www.jb51.net/article/24762.htm;
2. getElementsByTagName's shorthand: http://www.jb51.net/article/24026.htm;
3. The function of getting element index in native javascript: http://www.jb51.net/article/24763.htm;
4. Replace the window.onload, can be called multiple load functions:
Copy Code code as follows:
function Iload (func) {
var oload=window.onload;
if (typeof window.onload!= ' function ') {
Window.onload=func;
}else{
Window.onload=function () {
Oload ();
Func ();
}
}
}
5. Get the next element node:
Copy Code code as follows:
function Nextelem (node) {
if (node.nodetype==1) return node;
if (node.nextsibling) return Nextelem (node.nextsibling);
return null;
}
6. Gets the last element node (this function must call the function in article fifth):
Copy Code code as follows:
function Prevelem (node) {
if (node.nodetype==1) {
return node;
}else if (node.previoussibling) {
Return Nextelem (node.previoussibling);
}else{
return null;
}
}
7. Native JavaScript has insertbefore methods, but unfortunately there is no InsertAfter method, how to do? Use the following function to implement:
Copy Code code as follows:
function InsertAfter (newchild,refchild) {
var Parelem=refchild.parentnode;
if (parelem.lastchild==refchild) {
Refchild.appendchild (newchild);
}else{
Parelem.insertbefore (newchild,refchild.nextsibling);
}
}
8. Add a style to the element [remember to add not replace, equivalent to addclass (value) in jquery]:
Copy Code code as follows:
function AddClass (elem,value) {
if (!elem.classname) {
Elem.classname=value;
}else{
var ovalue=elem.classname;
ovalue+= "";
Ovalue+=value;
Elem.classname=ovalue;
}
}
9. Get the style of the element:
Copy Code code as follows:
function GetStyle (id,stylename) {
var elem=$ (ID);
var realstyle=null;
if (Elem.currentstyle) {
Realstyle=elem.currentstyle[stylename];
}else if (window.getComputedStyle) {
Realstyle=window.getcomputedstyle (Elem,null) [stylename];
}
return realstyle;
}
10. Compatible Event bindings:
Copy Code code as follows:
function Addeventsamp (OBJ,EVT,FN) {
if (Obj.addeventlistener) {
Obj.addeventlistener (EVT, FN, false);
}else if (obj.attachevent) {
Obj.attachevent (' on ' +evt,fn);
}
}
11. Removal of events
Copy Code code as follows:
function Removeeventsamp (OBJ,EVT,FN) {
if (Obj.removeeventlistener) {
Obj.removeeventlistener (Evt,fn,false);
}else if (obj.detachevent) {
Obj.detachevent (' on ' +evt,fn);
}
}
12. Detection Style
Copy Code code as follows:
function hasclass (element, ClassName) {
var reg = new RegExp (' (\\s|^) ' + ClassName + ' (\\s|$) ');
Return Element.className.match (REG);
}
13. Delete Style
Copy Code code as follows:
function removeclass (element, ClassName) {
if (Hasclass (element, className)) {
var reg = new RegExp (' (\\s|^) ' + ClassName + ' (\\s|$) ');
Element.classname = Element.className.replace (Reg, ');
}
}
Original published in Mr.think blog: http://mrthink.net/javascript-common-function-tip/
$()
Copy Code code as follows:
function $ () {
var elements = [];
for (var i = 0; i < arguments.length; i++) {
var element = Arguments[i];
if (typeof element = = ' String ')
element = document.getElementById (element);
if (arguments.length = 1)
return element;
Elements.push (Element);
}
return elements;
}
Toggle ()
Used to show or hide a DOM element.
Copy Code code as follows:
function Toggle (obj) {
var el = document.getElementById (obj);
el.style.display= (El.style.display!= "None"?) None ":")
}