原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()

classList.add( newClassName );

添加新的类名,如已经存在,取消添加

classList.contains( oldClassName );

确定元素中是否包含指定的类名,返回值为true 、false;

classList.remove( oldClassName );

移除已经存在的类名;

classList.toggle( className );

如果classList中存在给定的值,删除它,否则,添加它;

  • classList.replace( oldClassName,newClassName );
    类名替换
let div = document.createElement('div')
div.id = 'test'
let test = document.querySelector('#test')

//添加类:select
test.classList.add("select")
	
//删除类:select
test.classList.remove("select")
	
//确定是否包含给定的类:select
test.classList.contains("select");

//切换类:select,存在删除,不存在,就添加;
test.classList.toggle("select")

//替换类:新类newSelect替换老类select
div.classList.replace("select","newSelect")

发布了65 篇原创文章 · 获赞 76 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/weixin_42752574/article/details/103378054
今日推荐