html5学习01

 

HTML5: element.classList API

 

element.classList 将会返回 element 的 class 信息

element.classList:

{
length: {number},
add: function(){},
remove: function(){},
toogle: function(){},
item: function(){},
contanis: function(){}
}


<div class="c1 c2 c3" id="ele"></div>

var ele =document.getElementById('ele');

ele.classList.add('c4');
ele.classList.remove('c2');
ele.classList.toggle('c3'); //移除 c3
ele.classList.toggle('c3'); //添加 c3
ele.classList.contains('c1') // true
ele.classList.contains('c5') // false

ele.classList.contains.itme(0) // c1

使用 toggle 时候，如果class不存在，则增加这个class

检测浏览器是否支持 classList:
'classList' in document.createElement('a') // true 为支持


浏览器支持状况：
Chrome 8+, Firefox 3.6+, Opera 11.5+ , IE 和 Safria 不支持


参考链接：
http://davidwalsh.name/classlist
https://developer.mozilla.org/en/DOM/element.classList

 

 

 

 <p id="classListTest">Bacon ipsum dolor sit amet pancetta bresaola tenderloin, swine meatball tongue ham boudin t-bone ribeye jerky sausage. Pork loin cow shankle drumstick tri-tip, chicken venison strip steak.</p> 
    <p id="status">Not Support :(</P> 
    <p id="toggleClass">Toggle a class:  
      <input type="button" value="big" /> 
      <input type="button" value="bold" /> 
      <input type="button" value="pink" /> 
    </p> 
 
 
<script> 
// checkfor support 
 
var toggle = document.getElementById('toggleClass'), 
    test = document.getElementById('classListTest'); 
 
if (toggle.classList) { 
  var supported = document.getElementById('status'); 
  supported.parentNode.removeChild(supported); 
  // bit of event delegation otherwise we're binding to each input 
  toggle.addEventListener('click', function (event) { 
    if (event.target.nodeName == 'INPUT') { 
      test.classList.toggle(event.target.value); 
    } 
  }, false); 
} else { 
  // not supported 
} 
</script>