给js添加类名/添加元素标签/

原生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”);