最近看到原生js—操作类名

记下笔记

  • 添加新的类名,如已经存在,取消添加
    classList.add( newClassName );
  • 确定元素中是否包含指定的类名,返回值为true 、false;
    classList.contains( oldClassName );
  • 移除已经存在的类名;
    classList.remove( oldClassName );
  • 如果classList中存在给定的值,删除它,否则,添加它;
    classList.toggle( className );
  • 类名替换
    classList.replace( oldClassName,newClassName );

例子 菜鸟




    
    
    
    Document
    


    

点击按钮为 DIV 元素添加 "mystyle" 类。

注意: Internet Explorer 9 及更早 IE 版本浏览器不支持 classList 属性。

我是一个 DIV 元素。

ES6 代码块使用

  • 1、如何确认元素是否具有指定的类?

const hasClass = (el, className) => el.classList.contains(className); 

// Example 
hasClass(document.querySelector("p.mystyle "), "mystyle"); // true

  • 2、如何切换元素的类?
const toggleClass = (el, className) => el.classList.toggle(className); 

// Example 
toggleClass(document.querySelector( p.mystyle ),  mystyle); // 该段不再有 "mystyle" 类

你可能感兴趣的:(最近看到原生js—操作类名)