元素的classList屬性怎麼用

2021-09-01 17:37:32 字數 751 閱讀 7411

檢視html元素的classlist元素將返回型別為domtokenlist的物件,所以我們要研究的是該物件的屬性和方法。

該型別的物件描述了乙個用空格分隔的字串陣列,陣列的每一項代表該元素的乙個類名。htmlelement.classlist, htmllinkelement.rellist, htmlanchorelement.rellist or htmlareaelement.rellist等方法都會返回該物件。

var elemclasslist = document.queryselector('#bubby').classlist,

classnum =elemclasslist.length;

elemclasslist.add('***y');

elemclasslist.remove('***y');

elemclasslist.toggle('fat');

if( elemclasslist.contains('nipple') )

var sys = 

} // 為每乙個元素新增類名

for (var i = 0, len = arr.length; i < len; i++)

} },

removeclass: function (elem, value)

} for (var z = 0, len = arr.length; z < len; z++)

} }};

classList屬性和className的區別

classname的不方便之處 在操作類名時,需要通過classname屬性新增,刪除和替換類名。因為classname中是乙個字串,所以即使只修改字串一部分,也必須每次都設定整個字串的值。如下所示 html部分 但是!classlist卻極為方便!所以classlist誕生了.classlist屬...

classList屬性的知識點整理

classlist屬性返回元素的類名,作為domtokenlist物件 該屬性用於在元素中新增 移出 切換css類 語法 elem.classlist 方法 add string string 新增指定的類值。如果這些類已經存在於元素的屬性中,那麼他們將被忽略 remove string strin...

DOM類名操作classList 屬性

classlist 屬性返回元素的類名,作為 domtokenlist 物件。該屬性用於在元素中新增,移除及切換 css 類。classlist 屬性是唯讀的,但你可以使用 add 和 remove 方法修改它。add class1,class2,在元素中新增乙個或多個類名。document.get...