几个常用且实用的原生JavaScript函数

发表于 2010年09月08日
前端

常用到的一些原生JavaScript函数,比较实用, 今天特地整理一下,分享给大家,希望对大家有用
1. 替代window.onload,可多次调用的加载函数:

function iLoad(func) {
var oLoad=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oLoad();
func();
}
}
}

function iLoad(func) {

var oLoad=window.onload;

if(typeof window.onload!='function'){

window.onload=func;

}else{

window.onload=function(){

oLoad();

func();

}

2. 获取下一个元素节点:

function nextElem(node){
if(node.nodeType==1) return node;
if(node.nextSibling) return nextElem(node.nextSibling);
return null;
}

function nextElem(node){

if(node.nodeType==1) return node;

if(node.nextSibling) return nextElem(node.nextSibling);

return null;

}

3. 获取上一个元素节点(此函数须调用第五条中的函数):

function prevElem(node){
if(node.nodeType==1){
return node;
}else if(node.previousSibling){
return nextElem(node.previousSibling);
}else{
return null;
}
}

function prevElem(node){

if(node.nodeType==1){

return node;

}else if(node.previousSibling){

return nextElem(node.previousSibling);

}else{

return null;

}

4. 原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法,怎么办?用如下函数实现:

function insertAfter(newChild,refChild){
var parElem=refChild.parentNode;
if(parElem.lastChild==refChild){
refChild.appendChild(newChild);
}else{
parElem.insertBefore(newChild,refChild.nextSibling);
}
}

function insertAfter(newChild,refChild){

var parElem=refChild.parentNode;

if(parElem.lastChild==refChild){

refChild.appendChild(newChild);

}else{

parElem.insertBefore(newChild,refChild.nextSibling);

}

5. 为元素添加样式[记住是添加不是替换,相当于jQuery中的addClass(value)]:

function addClass(elem,value){
if(!elem.className){
elem.className=value;
}else{
var oValue=elem.className;
oValue+=" ";
oValue+=value;
elem.className=oValue;
}
}

function addClass(elem,value){

if(!elem.className){

elem.className=value;

}else{

var oValue=elem.className;

oValue+=" ";

oValue+=value;

elem.className=oValue;

}

6. 获取元素的样式:

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;
}

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;

}

7. 兼容事件绑定:

function addEventSamp(obj,evt,fn){
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}

function addEventSamp(obj,evt,fn){

if (obj.addEventListener) {

obj.addEventListener(evt, fn, false);

}else if(obj.attachEvent){

obj.attachEvent('on'+evt,fn);

}

8. 移除事件

function removeEventSamp(obj,evt,fn){
if(obj.removeEventListener){
obj.removeEventListener(evt,fn,false);
}else if(obj.detachEvent){
obj.detachEvent('on'+evt,fn);
}
}

function removeEventSamp(obj,evt,fn){

if(obj.removeEventListener){

obj.removeEventListener(evt,fn,false);

}else if(obj.detachEvent){

obj.detachEvent('on'+evt,fn);

}

9. 检测样式

function hasClass(element, className){
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
return element.className.match(reg);
}

function hasClass(element, className){

var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');

return element.className.match(reg);

}

10. 删除样式

function removeClass(element, className){
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
element.className = element.className.replace(reg, ' ');
}
}