1.通过className来添加、删除类名
 
添加类名
 获取元素.className = "类名1 类名2 ..."多个类名用空格隔开
 移除类名
 获取元素名.className = " "直接等于一个空字符串即可删除类名
 
2.通过classList来添加、删除类名
 
添加一个类名
 获取元素名.classList.add("类名");
 添加多个类名用逗号隔开
 获取元素名.classList..add("类名1","类名2","类名3",...); 每个类名需要用引号引起来
 移除一个类名
 获取元素名.classList.remove("类名");
 移除多个类名
 获取元素名.classList..remove("类名1","类名2","类名3",...); 每个类名需要用引号引起来
 
举个栗子
 
 
<style>
        input {
            outline: none;
            height: 35px;
            line-height: 35px;
            border: 1px solid #ccc;
            color: #999;
            text-indent: 1rem;
            display: inline-block;
            transition: all .3s;
        }

        .active {
            border: 1px solid skyblue;
            color: #333;
        }

        .active2 {
            box-shadow: 0 0 3px 2px pink;;
        }
    </style>
 
<input type="text" value="手机">
    <script>
        window.onload = function () {
            document.querySelector('input').onfocus = function () {
                this.value = ""
                // 方法一：
                // this.style.color = "#333"
                // this.style.border = "1px solid skyblue"

                // 方法二：
                this.classList.add("active", "active2");

                // 方法三：
                // this.className = "active active2"
            }
            // trim() 去除空格
            document.querySelector('input').onblur = function () {
                if (this.value.trim() == "") {
                    this.value = "手机"
                    // 方法一：
                    // this.style.color = "#999"
                    // this.style.border = "1px solid #ccc"

                    // 方法二：
                    this.classList.remove("active", "active2");

                    // 方法三：

                    // this.className = ""
                }
            }
        }
    </script>

1.添加类名
 
document.getElementsByClassName('myEL')[0].classList.add('checked');
 
2.删除类名
 
document.getElementsByClassName('myEL')[0].classList.remove('checked');
 
3.包含类名
 
document.getElementsByClassName('myEL')[0].classList.contains('checked'); 
//true or false

原生js中添加类的方法
 
1. document.getElementById(“div”).classList.add(“类名”);ie10以上支持
 
添加类ele.classList.add("","") ，
删除类ele.classList.remove("",""),
替换类ele.classList.replace(“a”,“b”),将a替换成b
ele.classList.toggle("",""),有的时候删除，没有的时候添加
ele.classList.contains("")判断是否有某个类
 
  
ele.classList.length("")返回类的长度(数量)，没有返回0
 
 
const div = document.createElement('div');
div.className = 'foo';

// 初始状态：<div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加类值
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// 如果 visible 类值已存在，则移除它，否则添加它
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// 添加或移除多个类值
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// 使用展开语法添加或移除多个类值
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// 将类值 "foo" 替换成 "bar"
div.classList.replace("foo", "bar");
 
    <script>
        // classList , 兼容问题 ，支持IE10以上
        // babel-polyfill.js
        // polyfill
        // HTMLDivElement  继承 HTMLElement

var isClsList = 'classList' in HTMLElement.prototype;
if(!isClsList) {
    Object.defineProperty(HTMLElement.prototype,'classList',{
        get:function(){
            // add, remove ,contains,toggle
            // this  - > 
            var _self = this;
            return {
                add:function(cls){
                    if(!this.contains(cls)){
                        _self.className +=' ' + cls;
                    }
                },
                remove(cls){
                    if(this.contains(cls)){ 
                        var reg= new RegExp(cls);   
                        _self.className =  _self.className.replace(reg,'');
                    }
                },
                contains(cls){      
                  var index =  _self.className.indexOf(cls);
                    return  index!=-1 ? true : false;
                },
                toggle(cls){
                    if(this.contains(cls)){ 
                        this.remove(cls)
                    } else {
                        this.add(cls)
                    }
                }
            }
        }
    })
}

var classListDom = document.getElementById('classListDom');
classListDom.classList.contains('test')
classListDom.classList.add('ok')
classListDom.classList.toggle('ok')
 </script>
 
2.document.getElementById(‘test3’).className=‘class3’
 
document.getElementById(‘test3’).className+='class3’添加类
 
3.原生JS添加元素属性
 
getAttribute：获取某一个属性的值
 setAttribute：建立一个属性，并同时给属性捆绑一个值
 createAttribute：仅建立一个属性
 removeAttribute：删除一个属性
 hasAttribute:是否含有某个属性
 
getAttributeNode：获取一个属性作为对象
 setAttributeNode：建立一个节点
 removeAttributeNode：删除一个属性
 
前者删除或添加后不返回值，后者返回值是被添加或删除的属性
 
4.jquery中添加类的方法
 
//1.为 

  元素添加一个类:
 
 $("#div").addClass(“类名”);

 
//2.为 

  元素添加多个类:
 
 //只需要通过空格来间隔 class 值即可一次性添加多个 class
 
 $("#div").addClass(“类名1 类名2 类名3”);

 
//3.为 

  元素移除一个类:
 
 $("#div").removeClass(“类名”);

 
//4.为 

  元素移除多个类:
 
 //只需要通过空格来间隔 class 值即可一次性清除掉多个 class
 
 $("#div").removeClass(“类名1 类名2 类名3”);

为 <div> 元素添加 class:
 
document.getElementById("myDIV").classList.add("mystyle");
 
 
 
为 <div> 元素添加多个类:
 
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
 
 
 
为 <div> 元素移除一个类:
 
document.getElementById("myDIV").classList.remove("mystyle");
 
 
 
为 <div> 元素移除多个类:
 
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
 
 
 
检查是否含有某个CSS类
 
myDiv.classList.contains('myCssClass'); //return true or false
 
 
 
检查页面是否包含某个元素
 
if(document.getElementById("p1")) {
    console.log("p1存在");
} else {
    console.log("p1不存在");
}
 
注意：
 
在使用jquery时，判断页面是否包含某个元素，应该使用下面写法：
 
if($("#p11").length > 0) {
    console.log("p1存在");
} else {
    console.log("p1不存在");
}
 
而不是：
 
if($("#p11")) {
    console.log("p1存在");
} else {
    console.log("p1不存在");
}
 
如果使用后面的写法，无论页面是否包含id为p11的元素，都打印“p1存在”。
 
原因：$("#p11")是一个对象，数据类型为object。
 
当页面存在这个元素时，打印结果如下
 
 
当页面元素不存在时，打印结果如下：