class属性增删改查

今天发现自己每写一个功能就去上网查查，然后继续写，平静下来反思，我才知道是因为自己太懒了，不愿意总结，今天特地为此做总结。

//例子
<input type="text" value="xixi" id="myInput" class="class1"/>

查看

var myInput = document.getElementById("myInput");
//方式1
console.log(myInput.className);
//方式2
console.log(myInput.classList.value);
//方式3：注意不能使用for(i in ...) ，因为使用该方式时i指的是属性的名称
for(i=0; i<myInput.classList.length; i++) {
      console.log(myInput.classList[i]);
}

新增

//添加class2属性
//方式1：此方式是采用覆盖方式，局限性大
myInput.className = "class1 class2");
//方式2：此方式需要注意前面加空格
myInput.className += " class2");
//方式3：此方式是最优雅的方式，不需要考虑空格，而且若原来存在相同的class属性则不会添加
myInput.classList.add("class2");

删除

//存在才会删除
myInput.classList.remove("class2");

修改

//将class1修改为class8
//实际上是替换后重新赋值，我还没找到其他方式
var result = myInput.className.replace("class1", "class8");
myInput.className = result;