zoukankan html css js c++ java

HTML5的classList API优化对样式名className的操作

HTML5的classList API提供了以下几个比较有用的控制CSS样式名的方法：

//添加一个class
elem.classList.add(classname);

//删除一个class
elem.classList.remove(classname);

//判断一个class是否已存在
elem.classList.contains(classname);

//如果class已存在则移除，如果不存在则添加
elem.classList.toggle(classname);

更多更详细的方法请参看HTML5 classList API。

　　这些方法以前是通过JavaScript来实现的，现在HTML5提供了这些原生的API，我们可以用它来优化以前用JavaScript来实现的操作方法，但是也要保证兼容不支持这几个API的浏览器。具体代码如下：

javascript:

function N(id){return document.getElementById(id)}
N.trim = String.prototype.trim || function(str){
  return str.replace(/^s+/, '').replace(/s+$/, '');
};
if( document.createElement('p').classList ){
  N.addClass = function(elem, className){
    elem && elem.classList && elem.classList.add(className);
  };
  N.removeClass = function(elem, className){
    elem && elem.classList && elem.classList.remove(className);
  };
  N.hasClass = function(elem, className){
    return elem && elem.classList && elem.classList.contains(className);
  };
  N.toggleClass = function(elem, className){
    elem && elem.classList && elem.classList.toggle(className);
  };
  alert('Use html5 classList!');
}else{
  N.addClass = function(elem, className){
    if( elem ){
      var cn = elem.className;
      if(!cn){
        elem.className = className;
      }else if( (' '+cn+' ').indexOf(' '+className+' ')===-1 ){
        elem.className = className+' '+cn;
      }
    }
  };
  N.removeClass = function(elem, className){
    if( elem ){
      var cn = elem.className;
      elem.className = cn===className ? 
        '' : N.trim( (' '+cn+' ').replace(' '+className+' ', ' ') );
    }
  };
  N.hasClass = function(elem, className){
    if( elem && elem.className ){
      return (' '+elem.className+' ').indexOf(' '+className+' ') > -1;
    }
    return false;
  };
  N.toggleClass = function(elem, className){
    N.hasClass(elem, className) ? 
      N.removeClass(elem, className) : N.addClass(elem, className);
  };
}

HTML测试文件的源码如下，自己拿去测试去吧：

<html>
<head>
<title>利用HTML5的classList API优化样式名className操作</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>

<p>默认字体和颜色是这样的。。。</p>　　　
<p id="p1">这是p1，原无class</p>
<p id="p2" class="gree bold">这是p2，原样式gree bold</p>
<p id="p3" class="gree bold">这是p3，原样式gree bold</p>
<p id="p4" class="gree bold">这是p4，原样式gree bold</p>
<p id="p5">这是p5，原无class</p>
<p id="p6" class="gree bold">这是p4，原样式gree bold</p>
</body>
</html>

css:

p{color:red;font-size:12px;}
.gree{color:#00ff00;}
.blue{color:#0000ff;}
.bold{font-weight:bold;}
.small{font-size:18px;}
.middle{font-size:32px;}
.big{font-size:56px;}

javascript:

function N(id){return document.getElementById(id)}
N.trim = String.prototype.trim || function(str){
  return str.replace(/^s+/, '').replace(/s+$/, '');
};
if( document.createElement('p').classList ){
  N.addClass = function(elem, className){
    elem && elem.classList && elem.classList.add(className);
  };
  N.removeClass = function(elem, className){
    elem && elem.classList && elem.classList.remove(className);
  };
  N.hasClass = function(elem, className){
    return elem && elem.classList && elem.classList.contains(className);
  };
  N.toggleClass = function(elem, className){
    elem && elem.classList && elem.classList.toggle(className);
  };
  alert('Use html5 classList!');
}else{
  N.addClass = function(elem, className){
    if( elem ){
      var cn = elem.className;
      if(!cn){
        elem.className = className;
      }else if( (' '+cn+' ').indexOf(' '+className+' ')===-1 ){
        elem.className = className+' '+cn;
      }
    }
  };
  N.removeClass = function(elem, className){
    if( elem ){
      var cn = elem.className;
      elem.className = cn===className ? 
        '' : N.trim( (' '+cn+' ').replace(' '+className+' ', ' ') );
    }
  };
  N.hasClass = function(elem, className){
    if( elem && elem.className ){
      return (' '+elem.className+' ').indexOf(' '+className+' ') > -1;
    }
    return false;
  };
  N.toggleClass = function(elem, className){
    N.hasClass(elem, className) ? 
      N.removeClass(elem, className) : N.addClass(elem, className);
  };
}

N.addClass(N('p1'), 'blue');
N.removeClass(N('p3'), 'bold');
N.toggleClass(N('p4'), 'gree');
N.toggleClass(N('p4'), 'middle');
N.toggleClass(N('p5'), 'big');
N.addClass(N('p6'), 'small');

个人在Chrome 22、Firefox 15、IE6,7,8,9下测试均没有问题，其他浏览器未测试。。。

　　其中发现IE9也没有classList API，IE6,7,8更不用说了。

　　本文来自flm000的博客，原文地址：http://blog.csdn.net/flm000/article/details/8069944

查看全文

相关阅读:
网站上线的过程
 PHP的四种基本算法
 YII框架第三方微博登录
 《正三角》《倒三角》
PHP实现四种基本排序
 php实现快速排序
 iwebshop 简介
 收集的伪静态中经常使用的一些参数
 我与AI的相识
 phpstudy下的nginx服务器显示目录

原文地址：https://www.cnblogs.com/leejersey/p/3788610.html