南京北大青鸟

全国免费电话:400-885-5191

三分钟了解北大青鸟
当前位置:北大青鸟 > 学习园地 > 编程技巧

利用HTML5的classList API优化对样式名className的操作

来源:南京北大青鸟张府园校区      作者:中博IT教育      发布时间:2012-10-19 17:02:55

HTML5的classList API提供了以下几个比较有用的控制CSS样式名的方法: [javascript] view plaincopy //添加一个class elem.classList.add(classname);
HTML5的classList API提供了以下几个比较有用的控制CSS样式名的方法:
[javascript] view plaincopy
//添加一个class  
elem.classList.add(classname);  
  
//删除一个class  
elem.classList.remove(classname);  
  
//判断一个class是否已存在  
elem.classList.contains(classname);  
  
//如果class已存在则移除,如果不存在则添加  
elem.classList.toggle(classname);  
更多更详细的方法请参看HTML5 classList API。
这些方法以前是通过JavaScript来实现的,现在HTML5提供了这些原生的API,我们可以用它来优化以前用JavaScript来实现的操作方法,但是也要保证兼容不支持这几个API的浏览器。具体代码如下:
[javascript] view plaincopy
function N(id){return document.getElementById(id)}  
N.trim = String.prototype.trim || function(str){  
    return str.replace(/^\s+/, '').replace(/\s+$/, '');  
};  
if( document.createElement('p').classList ){  
    N.addClass = function(elem, className){  
        elem && elem.classList && elem.classList.add(className);  
    };  
    N.removeClass = function(elem, className){  
        elem && elem.classList && elem.classList.remove(className);  
    };  
    N.hasClass = function(elem, className){  
        return elem && elem.classList && elem.classList.contains(className);  
    };  
    N.toggleClass = function(elem, className){  
        elem && elem.classList && elem.classList.toggle(className);  
    };  
    alert('Use html5 classList!');  
}else{  
    N.addClass = function(elem, className){  
        if( elem ){  
            var cn = elem.className;  
            if(!cn){  
                elem.className = className;  
            }else if( (' '+cn+' ').indexOf(' '+className+' ')===-1 ){  
                elem.className = className+' '+cn;  
            }  
        }  
    };  
    N.removeClass = function(elem, className){  
        if( elem ){  
            var cn = elem.className;  
            elem.className = cn===className ?   
                '' : N.trim( (' '+cn+' ').replace(' '+className+' ', ' ') );  
        }  
    };  
    N.hasClass = function(elem, className){  
        if( elem && elem.className ){  
            return (' '+elem.className+' ').indexOf(' '+className+' ') > -1;  
        }  
        return false;  
    };  
    N.toggleClass = function(elem, className){  
        N.hasClass(elem, className) ?   
            N.removeClass(elem, className) : N.addClass(elem, className);  
    };  
}  
HTML测试文件的源码如下,自己拿去测试去吧:
[html] view plaincopy
<!DOCTYPE html>  
<html>  
<head>  
<title>利用HTML5的classList API优化样式名className操作</title>  
<meta http-equiv="content-type" content="text/html;charset=utf-8">  
<style type="text/css">  
p{color:red;font-size:12px;}  
.gree{color:#00ff00;}  
.blue{color:#0000ff;}  
.bold{font-weight:bold;}  
.small{font-size:18px;}  
.middle{font-size:32px;}  
.big{font-size:56px;}  
</style>  
</head>  
<body>  
  
<p>默认字体和颜色是这样的。。。</p>     
<p id="p1">这是p1,原无class</p>  
<p id="p2" class="gree bold">这是p2,原样式gree bold</p>  
<p id="p3" class="gree bold">这是p3,原样式gree bold</p>  
<p id="p4" class="gree bold">这是p4,原样式gree bold</p>  
<p id="p5">这是p5,原无class</p>  
<p id="p6" class="gree bold">这是p4,原样式gree bold</p>  
  
<script type="text/javascript">  
function N(id){return document.getElementById(id)}  
N.trim = String.prototype.trim || function(str){  
    return str.replace(/^\s+/, '').replace(/\s+$/, '');  
};  
if( document.createElement('p').classList ){  
    N.addClass = function(elem, className){  
        elem && elem.classList && elem.classList.add(className);  
    };  
    N.removeClass = function(elem, className){  
        elem && elem.classList && elem.classList.remove(className);  
    };  
    N.hasClass = function(elem, className){  
        return elem && elem.classList && elem.classList.contains(className);  
    };  
    N.toggleClass = function(elem, className){  
        elem && elem.classList && elem.classList.toggle(className);  
    };  
    alert('Use html5 classList!');  
}else{  
    N.addClass = function(elem, className){  
        if( elem ){  
            var cn = elem.className;  
            if(!cn){  
                elem.className = className;  
            }else if( (' '+cn+' ').indexOf(' '+className+' ')===-1 ){  
                elem.className = className+' '+cn;  
            }  
        }  
    };  
    N.removeClass = function(elem, className){  
        if( elem ){  
            var cn = elem.className;  
            elem.className = cn===className ?   
                '' : N.trim( (' '+cn+' ').replace(' '+className+' ', ' ') );  
        }  
    };  
    N.hasClass = function(elem, className){  
        if( elem && elem.className ){  
            return (' '+elem.className+' ').indexOf(' '+className+' ') > -1;  
        }  
        return false;  
    };  
    N.toggleClass = function(elem, className){  
        N.hasClass(elem, className) ?   
            N.removeClass(elem, className) : N.addClass(elem, className);  
    };  
}  
  
N.addClass(N('p1'), 'blue');  
N.removeClass(N('p3'), 'bold');  
N.toggleClass(N('p4'), 'gree');  
N.toggleClass(N('p4'), 'middle');  
N.toggleClass(N('p5'), 'big');  
N.addClass(N('p6'), 'small');  
</script>  
</body>  
</html>  
个人在Chrome 22、Firefox 15、IE6,7,8,9下测试均没有问题,其他浏览器未测试。。。
其中发现IE9也没有classList API,IE6,7,8更不用说了。 (责任编辑:南京北大青鸟)

分享到:

抢免费试听名额

名额仅剩66名

教育改变生活

WE CHANGE LIVES