元素class的增 刪 查 toggle

2022-05-18 09:42:07 字數 840 閱讀 2726

比如有乙個元素div

<

div

class

="btn user"

>我是div

div>

之前只知道元素有乙個classname可以來改動  元素的類名

但是今天看到了,html5,增加了classlist屬性,更改元素的類名會更簡單

先獲取到這個div元素

var div=document.queryselector('.btn');

classlist有4個方法 add()   contains()   remove()  toggle()

想必大家看到這些方法名就能猜到這些方法是幹什麼的

add()    增加類名(存在就不再增加了)

contains()   檢查這個類名存在不存在     存在返回true   不存在返回 false

remove()     刪除指定類名   

toggle()     類名存在就刪除     不存在就新增

插入個例項** 

var div=document.queryselector('.btn');

console.log(div)

div.classlist.add('haah')

console.log(div.classlist.contains('haah'));

div.classlist.remove('haah');

div.classlist.toggle('haah')

var classs=div.classlist;

console.log(classs)

class屬性增刪改查

今天發現自己每寫乙個功能就去上網查查,然後繼續寫,平靜下來反思,我才知道是因為自己太懶了,不願意總結,今天特地為此做總結。例子 檢視 var myinput document.getelementbyid myinput 方式1 console.log myinput.classname 方式2 c...

ES nested 陣列元素增刪改查

update api elasticsearch reference 7.11 elastic elasticsearch remove update field inside nested object es中使用nested型別的內嵌物件 對nested 陣列 進行操作 docker中啟動的es...

JS對HTML DOM元素的增刪改查

createelement 建立乙個新的html元素 節點 var p document.createelement p createtextnode 建立乙個新的文字節點 var ptext document.createtextnode 這是乙個文字節點。p.ptext 新增文字節點 目標元素末...