美文网首页
原生js之classList 增加、移除指定类

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

作者: _信仰zmh | 来源:发表于2017-11-09 22:37 被阅读0次

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)]

相关文章

  • HTML5 新增内容和 API

    classList 属性 该属性用于在元素中添加,移除及切换 CSS 类。 classList 属性返回元素的类名...

  • jquery中 .toggleClass(),.addClass

    .toggleClass(“className”)方法是用来给指定的元素增加或移除类名(如果元素的类名存在就移除,...

  • 原生javascript实现classList的代码

    看到一个原生JS实现classList的代码,分享一下。

  • Element.classList

    原生js——操作类名(HTML5新增classList) 首先,我们要有一个div 1,给文本添加元素对象 2,给...

  • 原生js的一些兼容封装

    获取Dom元素 获取样式表里的样式 添加和移除类名 添加(优化原生防止重复添加) 移除类(优化原生防止重复添加) ...

  • JS常用工具方法(长文慎入)

    如何隐藏所有指定的元素 如何检查元素是否具有指定的类? 页面DOM里的每个节点上都有一个classList对象,程...

  • JS之classList对象

    html5为每一个元素新增了一个classList对象,classList对象保存着控制当前元素类名的各个方法和属...

  • JavaScript动态增删 css类

    js使用setAttribute添加的类会把原来的类覆盖 ,classList则不会但是IE及版本的浏览器有兼容问题

  • HTML5获取class属性

    关键词:classList 方法 oDiv.classList //类数组class列表 oDiv.classL...

  • 前端知识积累之——JS篇

    1 原生js的dom操作 创建节点 createElement 移除节点 removeChild 替换节点 rep...

网友评论

      本文标题:原生js之classList 增加、移除指定类

      本文链接:https://www.haomeiwen.com/subject/kdbimxtx.html