H5新增屬性classList

2022-07-17 11:09:08 字數 1799 閱讀 5988

h5中新增了乙個classlist，原生js可以通過它來判斷獲取dom節點有無某個class。

classlist是html元素物件的成員，它的使用非常簡單，比如

console.log(document.body.classlist);
目前已知classlist api有length,item,add,remove,toggle,contains

靜態屬性。可以獲取元素類名的個數，使用方式：

var len = document.body.classlist.length;
方法。可以獲取元素的類名，接受乙個引數，即數字索引。使用方式：

//如果index超出範圍，則返回null


var cls = document.body.classlist.item(index);
方法。可以給元素新增類名，就像jquery中的addclass()。使用方式：

document.body.classlist.add('myclass');


//遺憾的是，它一次性只能增加乙個類，比如以下方式將會報錯


'class1 class2');
方法。可以將元素的類名刪除，就像jquery中的removeclass()。和add()方法一樣，一次只能刪除乙個類名。使用方式：

document.body.classlist.remove('myclass');
方法。可以給元素交替增加類名和刪除類名，就像jquery中的toggleclass()。

當只有乙個引數時：切換 class value，即如果類存在，則刪除它並返回false，如果不存在，則新增它並返回true。

當存在第二個引數時：如果第二個引數的計算結果為true，則新增指定的類值，如果計算結果為false，則刪除它。

使用方式：

document.body.classlist.toggle('myclass');
方法。可以檢測判斷元素是否包含某個類名，返回false或true。使用方式：

document.body.classlist.contains('myclass'); //返回true或者false
// div是具有class =「foo bar」的元素的物件引用


div.classlist.remove("foo");


div.classlist.add("anotherclass");


// 如果visible被設定則刪除它，否則新增它


div.classlist.toggle("visible");


// 新增/刪除 visible，取決於測試條件，i小於10


div.classlist.toggle("visible", i < 10);


alert(div.classlist.contains("foo"));


//新增或刪除多個類


div.classlist.add("foo","bar");


div.classlist.remove("foo", "bar");
h5在移動端的相容性相對來說已經很不錯，在不用jquery的時候，使用h5的新屬性，可以省下不少功夫的

2

h5 新增屬性

預設提示內容 placeholder 多輸入,多提交 multiple 支援乙個域中多輸入，逗號隔開,一般配合郵箱和url型別使用 自動獲取焦點,頁面載入，自動獲取焦點游標 autofocus 防止空提交 required 允許輸入的最小字元數和最大字元數 minlength 允許輸入的最小字元長度...

H5新增屬性

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title cursor pointer 出現小手 button 屬性選擇器使用方法 相當於交集選擇器，即表示既有button屬性...

h5新增常用屬性

頭部 導航文章 側邊導航 底部 缺點 相容性比較差，ie9以上才可識別。ie8及以下如何識別？1.手動用js建立標籤 注意 一定要先建立在使用。js建立的標籤都是行內元素，要將其 轉換成塊元素，或者加浮動。2.引入庫 薪資 手機號 你最喜歡的顏色 偶像的名字 體重 h5的下拉列表 磁碟占用 框架標籤...