資訊專欄INFORMATION COLUMN
摘要：使用，程序員還可以用它來判斷某個節(jié)點是否被賦予了某個類?，F(xiàn)在是增加現(xiàn)在是刪除是否存在類檢查是否含有某個類結果是或者。屬性返回類列表中類的數(shù)量。查看元素有多少個類名獲取獲取元素的所有類名返回類名在元素中的索引值。
頁面DOM里的每個節(jié)點上都有一個classList對象，程序員可以使用里面的方法新增、刪除、修改節(jié)點上的CSS類。使用classList，程序員還可以用它來判斷某個節(jié)點是否被賦予了某個CSS類。
添加類（add）document.getElementById("myDIV").classList.add("mystyle");
為
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
移除類(remove)
使用remove方法，你可以刪除單個CSS類：
document.getElementById("myDIV").classList.remove("mystyle");
移除多個類：
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
切換類(toggle)
這個方法的作用就是，當myDiv元素上沒有這個CSS類時，它就新增這個CSS類；如果myDiv元素已經(jīng)有了這個CSS類，它就是刪除它。就是反轉操作。
document.getElementById("myDIV").classList.toggle("newClassName");
myDiv.classList.toggle("myCssClass"); //現(xiàn)在是增加
myDiv.classList.toggle("myCssClass"); //現(xiàn)在是刪除
是否存在類（contains）
檢查是否含有某個CSS類:
var x = document.getElementById("myDIV").classList.contains("mystyle");
結果是true或者false。
length屬性返回類列表中類的數(shù)量。
查看
var x = document.getElementById("myDIV").classList.length; //3
獲取獲取
item(index)I am a DIV elementvar x = document.getElementById("myDIV").classList;
返回類名在元素中的索引值。索引值從 0 開始。如果索引值在區(qū)間范圍外則返回 null
獲取
var x = document.getElementById("myDIV").classList.item(0); //mystyle
瀏覽器支持
但是IE9和IE9以前的版本不支持該屬性，下面這個代碼可以彌補這個遺憾：（來自網(wǎng)友代碼）
if (!("classList" in document.documentElement)) {
Object.defineProperty(HTMLElement.prototype, "classList", {
get: function() {
var self = this;
function update(fn) {
return function(value) {
var classes = self.className.split(/s+/g),
index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(" ");
}
}
return {
add: update(function(classes, index, value) {
if (!~index) classes.push(value);
}),
remove: update(function(classes, index) {
if (~index) classes.splice(index, 1);
}),
toggle: update(function(classes, index, value) {
if (~index)
classes.splice(index, 1);
else
classes.push(value);
}),
contains: function(value) {
return !!~self.className.split(/s+/g).indexOf(value);
},
item: function(i) {
return self.className.split(/s+/g)[i] || null;
}
};
}
});
}
這兒提示一下，其他類型值轉換成布爾值的對應關系，對應關系表如下所示：
| 其他類型值 | 轉換成的布爾值 |
|---|---|
| undefined | false |
| null | false |
| 布爾值 | 不用轉換 |
| 數(shù)字 | 0，NaN轉化成false，其他數(shù)字類型轉換成true |
| 字符串 | 只有空字符串""轉換成false，其他都轉換成true |
| 對象 | 全部轉換為true |
想要了解Object.defineProperty可以參考如下兩篇文章：
《JS基礎篇--JS apply的巧妙用法以及擴展到Object.defineProperty的使用》
《JS基礎篇--JS中的可枚舉屬性與不可枚舉屬性以及擴展》
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/50424.html
摘要：例如判斷節(jié)點的是否有。的實現(xiàn)方式源碼的實現(xiàn)方式源碼里面用到了，是的屬性，屬性返回以數(shù)字值返回指定節(jié)點的節(jié)點類型。如果節(jié)點是屬性節(jié)點，則屬性將返回。代碼需要了解屬性，點擊屬性文章問題地址 例如： 判斷html節(jié)點的class是否有no-js。 1.jquery的實現(xiàn)方式 $(html).hasClass(no-js); jquery源碼的實現(xiàn)方式： var rclass = ...
摘要：轉載大牛的分析，這將是的方向。域名分析據(jù)統(tǒng)計，目前全世界的網(wǎng)站使用它。的市場份額不斷下降，以為基礎的標準語法，正得到越來越廣泛的支持。下面就探討如何用標準語法，取代的一些主要功能，做到。 轉載大牛的分析，這將是JSLite的方向。前人栽樹后人乘涼，jQuery為我們制定了一套接口標準，我們繼續(xù)為此努力。域名：JSLite.io jQuery 分析 據(jù)統(tǒng)計，目前全世界57.3%...
摘要：推薦事件事件流事件流就是事件處理執(zhí)行的過程。事件注冊事件類型事件處理函數(shù)是否在捕獲階段觸發(fā)。這個就是事件對象第二行的就是事件對象。除了阻止事件傳遞到父節(jié)點，還阻止了當前節(jié)點的后續(xù)事件。缺陷流量代價，安全性問題，大小限制。 文檔樹 DOM：Document Object Model 即：用對象的形式表示HTML、CSS。 DOM包含： DOM Core DOM HTML DOM Sty...
摘要：如他返回的對象是。方法，這個方法用于確定文檔是否獲得了焦點。另外，需要注意的是，該屬性插入元素并不會執(zhí)行其中的腳本。在中，方法接收一個字符串，返回一個經(jīng)過無害處理后的版本。屬性同樣的，在讀模式下返回調(diào)用它的元素及所有子節(jié)點的標簽。 與類相關的擴充 getElementsByClassName()方法 接收一個參數(shù)，即一個或多個類名的字符串。如： console.log(documen...
閱讀 2767·2021-11-24 10:23
閱讀 1163·2021-11-17 09:33
閱讀 2512·2021-09-28 09:41
閱讀 1427·2021-09-22 15:55
閱讀 3649·2019-08-29 16:32
閱讀 1916·2019-08-29 16:25
閱讀 1065·2019-08-29 11:06
閱讀 3431·2019-08-29 10:55
