- 对相同className的元素的选择
/*方法*/
function getByClass(oParent, sClassName) {
var aEls = oParent.getElementsByTagName("*"); //选择确定父元素内所有元素
var arr = [];
for (var i = 0; i < aEls.length; i++) {
var aClassName = aEls[i].className.split(' '); //将所选元素的classname拆分为数组
for (var j = 0; j < aClassName.length; j++) {//遍历这个数组进行判断
if (aClassName[j] == sClassName) {
arr.push(aEls[i]); //将含有要找的className的元素存在数组中
}
}
}
return arr; //得到在确定父元素下具有某个className的所有元素,然后就可以方便的调用了
}
例如:
<!--我的html部分-->
<style>
p{width:100px;height:20px;background-color: yellow;}
</style>
<title>studyUp</title>
<body>
<div>
<p class="cnp cnp1"></p>
<p class="cnp cnp2"></p>
<p class="cnp3"></p>
</div>
/*我的js部分*/
var oDiv=document.getElementsByTagName('div')[0];
var aCnp=getByClass(oDiv,"cnp");
for (var i = 0; i < aCnp.length; i++) {
aCnp[i].innerHTML="123";
};
实现效果:(要在class=”cnp”的元素里写上123)
2.对className的添加
/*方法*/
function addClass(obj, className) {
if (obj.className == "") {
obj.className = className;
} else {
var arr = obj.className.split(" ");//利用class间的空格将其拆分为数组
if (arrIndexOf(arr, className) == -1) {//这个元素里面已经存在另外的class的判断
obj.className += " " + className;
}
}
}
//判断一个数组中的某一个值是否存在,存在返回相应的位置否则返回-1;
function arrIndexOf(arr,aValue){
for(var i=0;i<arr.length;i++){
if(arr[i]==aValue){
return i;
}
}
return -1;
}
例如:
<!--我的html部分-->
<div>
<p class="cnp cnp1"></p>
<p class="cnp cnp2"></p>
<p class="cnp3" id="p3"></p>
</div>
/*我的js部分*/
var oP3=document.getElementsByTagName('p3');
addClass(p3,"cnp");
实现效果:(第三个p标签中多了cnp的类名)
3.对className的删除
/*方法*/
function removeClass(obj, sClassName) {
var arr = obj.className.split(" ");
if (arrIndexOf(arr, sClassName) != -1) {
arr.splice(arrIndexOf(arr, sClassName), 1);
obj.className=arr.join(" ");
//删除这个类名并将整个类名组重新转为字符串
}
}
例如:
<!--我的html部分-->
<div>
<p class="cnp cnp1"></p>
<p class="cnp cnp2"></p>
<p class="cnp3" id="p3"></p>
</div>
/*我的js部分*/
var oP3=document.getElementsByTagName('p3');
removeClass(p3,"cnp3");
实现效果:(第三个p标签中的class不见了)