如何实现这样的效果

<style>
.info{background-color:red;font-weight:normal;font-size:22px;}
</style>
<script>
function chg(){
var rule = document.styleSheets(0).rules(0);
rule.style.backgroundColor = "yellow";
rule.style.fontWeight = "bolder";
}
</script>
<table class="info">
<tr>
<td>abc123</td>
</table>
<input type="button" onclick="chg()" value="Change">

解决方案 »

  1.   

    hookee真快，而且全版扫，呵呵
      

  2.   

    事件还是要写，只是样式改用CSS来控制罢了。
      

  3.   

    <style>
    .info{background-color:red;font-weight:normal;font-size:22px;}
    </style>
    <script>
    function chg(){
    var rule = document.styleSheets(0).rules(0);
    rule.style.backgroundColor = "yellow";
    rule.style.fontWeight = "bolder";
    }
    </script>
    <table class="info">
    <tr>
    <td>abc123</td>
    </table>
    <input type="button" onclick="chg()" value="Change">--------------------------------------------------------------------------------
    如果不用<input type="button" onclick="chg()" value="Change">来控制呢?
    我的意思是先取得class="info"的table,然后控制此table的每一行(就是动态改变td的css)。
      

  4.   


    你是每次要改所有的td吗
    不是的话还是用事件吧
    -------------------------------------------------------------------------------------
    就是鼠标放在某行(tr)时，这行的背景改变，不是所有行背景都改变。如果在每行都写上<tr onmouseover="..." onmouseout="...">太麻烦了。
      

  5.   

    好像只有<a>才能只需要css就可以控制这种效果,或者发到css板块上问问
      

  6.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    <script>
    function changeTdStyle(event,heightLight){
      var obj= event.srcElement||event.target;
      if(obj.tagName=="TD"){
        if(heightLight){
          obj.style.backgroundColor='#8888ff';
        }
        else{
          obj.style.backgroundColor='';
        }
      }
      
    }
    </script>
    </head><body >
    <div style="font-size:10pt;">
    注1：鼠标移动，改变td背景。 <br/>      
    <br/>
    注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>       
    注-----：作者JK：<a href="mailTo:[email protected]?subject=">[email protected]</a><br/>    
    <hr/>
    </div><br>
    <table border="1" width="400" height="200" bgcolor="#cccccc"
      onmouseover="changeTdStyle(event,true);"
      onmouseout="changeTdStyle(event,false);" >
      <tr>
        <td>甲</td>
        <td>乙</td>
        <td>丙</td>
        <td>丁</td>
      </tr>
      <tr>
        <td>子</td>
        <td>丑</td>
        <td>寅</td>
        <td>卯</td>
      </tr>
      <tr>
        <td>上</td>
        <td>大</td>
        <td>人</td>
        <td>孔</td>
      </tr>
      <tr>
        <td>天</td>
        <td>地</td>
        <td>玄</td>
        <td>黄</td>
      </tr>
      <tr>
        <td>公</td>
        <td>侯</td>
        <td>伯</td>
        <td>子</td>
      </tr>
      <tr>
        <td>孟</td>
        <td>仲</td>
        <td>叔</td>
        <td>季</td>
      </tr>
    </table>
    </body></html>
      

  7.   

    <table   ...   class="info" >
    用DOM操作HTML就可以拉
    function tableOpera()
    {
       if(document.getElementsByTagName("table");
     //这样连CLASS都不用了，如果要用CLASS控制可以改document.getElementsByTagName("info");下同
       var tables = document.getElementsByTagName("table");
       for(i in tables)
       {
            tables[i].onmouseover = changetdcolor（）；//changetdcolor是改变table行颜色代码
        }
    }
    然后再页面onload就可以了
    可以这样onload
    写一个global.js，里面包括上面这个，还有1个
    function addLoadEvent(func)
    {
    var oldonload = window.onload;
    if(typeof window.onload != 'function')
    {
    window.onload = func;
    }
    else
    {
    window.onload = function()
    {
    oldonload();
    func();
    }
    }
    }然后addLoadEvent(tableOpera)；//以后只要在一个页面上包含这个JS就能用addLoadEvent加载许多函数
    --END--