当前位置: 首页 > Web前端 > HTML

您可能不熟悉WebAPI-Element.classList

时间:2023-04-03 00:45:28 HTML

引入了DOMTokenList,可用于替换element.className来访问和操作CSS类名以返回元素的类属性。它是只读的,但可以自行添加/删除。修改元素class属性的方法如果元素的class属性没有设置或者为空,则classList.length为0用法add(String[,String[,...]])添加任意数量的类名,如果类名已经存在将被忽略。constdiv=文档。创建元素('div');constcls=["foo","bar"];分区类名='foo';//'foo'分区。类列表。添加(...cls);//'foobar'div.classList.add('barbaz');//'foobarbaz'remove(String[,String[,...]])删除任意数量的类名,如果类名不存在并且没有抛出异常。//开始:'foobarbaz'div.classList.remove("foo");//'barbaz'item(Number)根据索引返回对应的类名。//开始:'barbaz'console.log(div.classList.item(1));//Output:'baz'toggle(String[,force])只有一个参数时:如果类名已经存在,则删除指定的类名,返回false,如果类名不存在,则添加指定的类nameandreturntrue当有两个参数时:如果第二个参数的值为true,则添加指定的类名如果第二个第一个参数的值为false,则删除指定的类名//Start:'barbaz'div.classList.toggle("foo");//'foobarbaz'div.classList.toggle("foo");//'barbaz'div.classList.toggle("foo",2<1);//'barbaz'contains(String)检查指定的类名是否存在。//开始:'barbaz'console.log(div.classList.contains("foo"));//输出:falsereplace(oldClass,newClass)用新的类名替换指定的类名。//开始:'barbaz'div.classList.replace("bar","foo");//不支持'foobaz'兼容性IE9及以下版本