您当前的位置:首页 > 网站建设笔记 >

DOM扩展classList属性

0

在操作类名时,需要通过className属性添加、删除和替换类名。因为className中是一个字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值。HTML5新增了一种操作类名的方式,可以让操作更简单也更安全,那就是为所有元素添加classList属性。这个classList属性是新集合类型DOMTokenList的实例。与其他DOM集合类似,DOMTokenList有一个表示自己包含多少元素的length属性,而要取得每个元素可以使用item()方法,也可以使用方括号语法。此外,这个新类型还定义如下方法。

  • add(value):将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
  • contains(value):表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
  • remove(value):从列表中删除给定的字符串。
  • toggle(value):如果列表中已经存在给定的值,删除它。如果列表中没有给定的值,添加它。

有了classList属性,除非你需要全部删除所有类名,或者完全重写元素的class属性,否则也就用不到className属性了。支持classList属性的浏览器有Firefox 3.6和Chrome。

<script type="text/javascript">
if(!String.trim){String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"");}}
function getClassNames(element){return element.className.trim().split(/\s+/);}
function hasClassName(element,className){
  if(element.classList){
    return element.classList.contains(className);
  }else{
    var classes=getClassNames(element);
    for(var i=0;i<classes.length;i++){if(classes[i]===className){return true;}}
    return false;
  }
}
function addClassName(element,className){
  if(hasClassName(element,className))return false;
  element.className+=(element.className ? " ":"")+className;
  return true;
}
function removeClassName(element,className){
  if(element.classList){
    element.classList.remove(className);
  }else{
    var classes=getClassNames(element);
    var length=classes.length;
    for(var i=length-1;i>=0;i--){if(classes[i]===className){delete(classes[i]);}}
    element.className=classes.join(" ");
    return (length==classes.length ? false : true);
  }
}
</script>
顶部中部底部