整理总结：JS DOM中对className的选择，添加和删除

最新推荐文章于 2023-07-18 12:40:15 发布

Dorui

最新推荐文章于 2023-07-18 12:40:15 发布

阅读量7.7k

点赞数

文章标签： javascript dom

本文链接：https://blog.csdn.net/Dorui/article/details/78313014

版权

对相同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不见了）
这里写图片描述

Dorui

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
整理总结：JS DOM中对className的选择，添加和删除

对相同className的元素的选择/*方法*/function getByClass(oParent, sClassName) { var aEls = oParent.getElementsByTagName("*"); //选择确定父元素内所有元素 var arr = []; for (var i = 0; i < aEls.length; i++) {
复制链接

扫一扫