实现查找指定元素的class可以使用Element.classList属性,该属性是一个只读的类数组对象,可以返回元素的所有class列表。同时,该属性还包含了一些常用的方法,可以用于添加、删除、切换、是否存在等操作。
查找指定元素的class
为了查找指定元素的class,可以使用如下代码:
let element = document.getElementById("my-element");
let classList = element.classList;
以上代码获取了ID为"my-element"的元素,并获取了该元素的classList列表。在后续操作中,可以对该列表进行添加、删除和切换等操作。
添加元素的class
为了给元素添加class,可以使用如下代码:
let element = document.getElementById("my-element");
element.classList.add("my-class");
以上代码给ID为"my-element"的元素添加了一个名为"my-class"的class。如果该元素原本没有该class,则添加成功。如果该元素已经有该class,则不会有任何变化。
删除元素的class
为了删除元素的class,可以使用如下代码:
let element = document.getElementById("my-element");
element.classList.remove("my-class");
以上代码删除ID为"my-element"的元素的名为"my-class"的class。如果该元素本身没有该class,则删除操作不会有任何影响。
切换元素的class
为了切换元素的class,可以使用如下代码:
let element = document.getElementById("my-element");
element.classList.toggle("my-class");
以上代码将切换ID为"my-element"的元素的名为"my-class"的class。如果该元素原本没有该class,则添加该class;如果该元素原本有该class,则删除该class。
判断元素是否存在指定的class
为了判断元素是否存在指定的class,可以使用如下代码:
let element = document.getElementById("my-element");
let hasClass = element.classList.contains("my-class");
以上代码将返回ID为"my-element"的元素是否存在名为"my-class"的class。如果存在,则返回true;如果不存在,则返回false。
以上是原生js实现查找/添加/删除/指定元素的class的完整攻略,可以通过classList属性和相应的方法进行实现,方便高效。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生js实现查找/添加/删除/指定元素的class - Python技术站