您的位置：首页 > Web前端 > JavaScript

js 中class选择器，addClass，removeClass，hasClass，toggleClass，getByClass

2015-08-22 14:44 651 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.js"></script>
<script>

function getByClass(oParent,sClass){

var ret = [];
// test
var re = new RegExp("\\b" + sClass + "\\b");
//var re = /\bbtn\b/;
var aEle = oParent.getElementsByTagName("*");
for(var i = 0; i < aEle.length; i++){

if(re.test(aEle[i].className)){
ret.push(aEle[i]);
}
}
return ret;
}

function addClass(obj,sClass){

var re = new RegExp("\\b"+sClass+"\\b");

if(!re.test(obj.className)){

if(obj.className){
obj.className += " " + sClass;
} else {
obj.className = sClass
}
}
}

function removeClass(obj,sClass){

var re = new RegExp("\\b"+sClass+"\\b","g");

obj.className = obj.className.replace(re,"").replace(/^\s+|\s+$/g,"").replace(/\s+/g," ");

if(!obj.className){
obj.removeAttribute("class");
}

}

function hasClass(obj,sClass){
var re = new RegExp("\\b"+sClass+"\\b");
return re.test(obj.className);
}

function toggleClass(obj,sClass){

if(hasClass(obj,sClass)){
removeClass(obj,sClass)
} else {
addClass(obj,sClass)
}
}

window.onload = function(){
var oBtn = document.getElementById("btn1");

oBtn.onclick = function(){

$(oBtn).toggleClass("active");

//toggleClass(this,"active")

};
};

</script>
</head>

<body>

<input id="btn1" class="box add btn active active active" type="button" value="toggleClass" />

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航