javascript 添加、刪除、改變 css 樣式名的實現方法

 

代碼如下

複製代碼

<script type="text/javascript"> // 說明：添加、移除、檢測 className // 整理：CodeBit.cn ( http://www.111cn.net )   function hasClass(element, className) { var reg = new RegExp('(\s|^)'+className+'(\s|$)'); return element.className.match(reg); } function addClass(element, className) { if (!this.hasClass(element, className)) { element.className += " "+className; } } function removeClass(element, className) { if (hasClass(element, className)) { var reg = new RegExp('(\s|^)'+className+'(\s|$)'); element.className = element.className.replace(reg,' '); } } </script>

執行個體

代碼如下

複製代碼

<style> .unnamed1   { background-image:   url(../images/botton.gif); background-repeat:   no-repeat; background-position:   center   center; font-size:   14px; line-height:   130%; text-decoration:   none; color:   #003399; text-align:   center; display:   list-item; font-weight:   bold; } .unnamed2   { background-attachment:   scroll; background-image:   url(../images/botton1.gif); background-repeat:   no-repeat; background-position:   center   center; font-size:   14px; line-height:   130%; color:   #FF0000; text-decoration:   none; font-weight:   bold; text-transform:   capitalize; font-style:   italic; } </style> <script> function   ChangeClass(obj) {       var   tb=document.getElementById( "tb ");       var   tdn=tb.getElementsByTagName( "td ");       for(var   i=0;i <tdn.length;i++)   {       tdn[i].className= 'unnamed2 ';       }       obj.className= 'unnamed1 '; } </script> <table   id=tb> <tr> <td   class=unnamed2   onclick= "ChangeClass(this) "> 詳細1 </td> </tr> <tr> <td   class=unnamed2   onclick= "ChangeClass(this) "> 詳細2 </td> </tr> </table>