原生js怎么添加一个或多个类名？（赞）

末蓝、 2022-05-11 00:06 236阅读 0赞

原文出处：[https://www.jianshu.com/p/e09271abebc7][https_www.jianshu.com_p_e09271abebc7]

## 好吧今天写个js，不知道怎么添加类名了 ##

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css" media="screen">
                #box {
                    width:  200px;
                    height: 200px;
                    margin:  0 auto;
                    background: pink;
                    border-radius: 20px;
                }   
                @keyframes move{
                    0%{width: 500px; background-color: red;}
                    10%{width: 100px; background-color: green;},
                    20%{width: 900px; background-color: yellow;},
                    50%{width: 300px; background-color: pink;},
                    80%{width: 550px; background-color: gold;},
                    100%{width: 200px; background-color: purple;}
                }
                .movea {
                    animation: move 1s ;
                }
                
            </style>
        </head>
        <body>
           <div id='box'>
            
           </div>
    
        <script type="text/javascript">
            document.getElementById('box').onclick = function() {
            
                this.setAttribute("class", "movea");
            
                this.classList.add("movea");
                
            }
        </script>
        </body>
    </html>

## 二 .使用原生JS给元素--添加/删除类名 ##

var dom = document.getElementById("idName");

**添加 单个 class:**

dom.classList.add("className1");

**添加多个类:**

dom.classList.add("className1", "className2", "className3", ....., "classNameN");

**移除一个类:**

dom.classList.remove("className1");

**移除多个类:**

dom.classList.remove("className1", "className2", "className3", ....., "classNameN");

**检查是否含有某个类**

dom.classList.contains('className'); //return true or false