html5如果與類交互
作者:佚名 時(shí)間:2014-06-19 分享到:
隨著classlist對(duì)象的引入,javascript也使元素類名稱交互變得更容易,dom中的第個(gè)元素都一個(gè)相關(guān)classlist,即一個(gè)應(yīng)用于這個(gè)元素的所有類的列表.要想獲得一個(gè)元素的classlist并將其存錄到控制臺(tái),則需要執(zhí)行以下代碼:
var el=document.queryselector('.foo');
console.log(el.classlist)
classlist對(duì)象包含一系列操縱類的屬性和類函數(shù),用戶可以用contains()查詢一個(gè)類存在與否,如果存在,那么這類函數(shù)返回true,否則返回false.用戶可以使用add()婁函數(shù)添加一個(gè)類,并使用remove()移除一個(gè)類,下面的代碼測(cè)試了類名稱foo;如果它不存在,則添加它,如果存在,則移除它:
if(el.classlist.contains('foo'))
{el.classlist.remove('foo');
}else{
el.classlist.add('foo');
}
另一種更快速的方法是使用toggle()類函數(shù),toggle()在一個(gè)類存在時(shí)移除它,并在它不存在時(shí)添加它.
el.classlist.toggle('foo');