原生js怎么添加一个或多个类名?

JavaScript012

原生js怎么添加一个或多个类名?,第1张

添加 单个 class:

添加多个类:

移除一个类:

移除多个类:

检查是否含有某个类

添加多个class 其实可以先从添加一个class然后对其进行封装

好的我废话就不多说了下面给出一份演示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

 .asdasd{

            width:100px

 height: 100px

 background-color: #cccccc

 }

        .hello{

            background-color: #00AEEF

 }

    </style>

</head>

<body>

<div class="asdasd" id="demo">

</div>

<script>

 //清楚空格

 function trim(str,t){

        if(typeof t == "undefined"){

            t="lr"

 }

        switch (t){

            case "l":{

                return str.replace(/(^\s*)/g, "")

 }

            case "r":{

                return str.replace(/(\s*$)/g, "")

 }

            case "lr":{

                return str.replace(/(^\s*)|(\s*$)/g, "")

 }

        }

    }

    //增加Class

 function addClass(ele,cls){

        if(!ele.getAttribute)return

 var allClass=[]

 cls=trim(cls)

 if(ele.getAttribute("class") == null){}else{

            allClass=ele.getAttribute("class").split(" ")

 }

        if(!inArr(allClass,cls)){

            allClass.push(cls)

 ele.setAttribute("class",allClass.join(" "))

 }

    }

    //循环

 function each(arr,f){

        if(!arr.length)return console.log("error:array is not length")

 for(var i = 0i<arr.lengthi++){

            f.call(arr[i],i,arr[i])

 }

    }

    //是否在数组里面 其实可以通过indexof判断但是indexof是匹配了数据类型的

 function inArr(arr,v){

        if(!arr.length)return false

 for(var i = 0i<arr.lengthi++){

            if(v==arr[i]){return true}

        }

        return false

 }

    //增加多个Class

 function  addClassArr(ele,arr){

       each(arr,function(){

           addClass(ele,this)

 })

   }

    addClassArr(document.getElementById("demo"),["a1","hello","world"])

</script>

</body>

</html>

可以看到 如果没有执行addClassArr这个函数显示的效果的这样的

执行了addClassArr这个函数显示的效果是这样的

reactjs添加两个class:可以采用品基恩字符串的方式<div className={value.class1 + " " + value.class2}>{value.value}</div>