原生js之classList 增加、移除指定类

jQuery中的removeClass() 方法,移除指定类的确很方便,但是它是jQuery中的方法,原生dom是不能直接使用的。

在项目中本来用的jq获取dom,但是在for循环中动态生成div,还要抓取到第i个dom,给div加固定id的话肯定不行,所以给他加了className,然后通过i,抓取第i个div。

$("test")[i].removeClass("class1");

以上代码,会报错 removeClass()不是一个function;

因为$("test")[i] 是原生dom,不能使用jQuery的方法;


第一种解决方法:

jq对象加了下标,就变成js对象,在转jq对象,才能用remove Class();
在把dom对象转换成jq对象,此处略;


第二种方法:使用原生的方法
  • 获取dom节点
var oThisDiv = document.getElementsByClassName("test")[i];
// 或者
var oThisDiv = $("test")[i];
使用classList下的add/remove/contains等方法
  • 添加class

oThisDiv.classList.add("myClass");

  • 添加多个class

oThisDiv.classList.add("myClass1","myClass2", ...., "myClassN");

  • 移除class

oThisDiv.classList.remove("myClass");

  • 移除多个class

oThisDiv.classList.remove("myClass1","myClass2", ...., "myClassN");

  • 检查是否含有指定类

oThisDiv.classList.contains("myClass1");

  • 返回值为true/false;

[图片上传失败...(image-8fe7bb-1510324851121)]

你可能感兴趣的:(原生js之classList 增加、移除指定类)