請問有沒有人知道怎樣用js動態加入<style>

我現在要用javascript動態加入<style>....</style>,注意不是style
遭遇一:用document.body.insertAdjacentHTML("beforeEnd", "<style>td.col{color:#ff0000;}</style>"); ,順利執行,但什麼都沒加入
遭遇二:用s=document.createElement("STYLE"),再document.body.appendChild(s),順利執行,但要往s中加入"td.col{color:#ff0000;}"就始終不行,無論用innerHTML還是用innerText,或insertAdjacentHTML
遭遇三:先找到已有的<style id="styleTest">,然後再用替換其內容,但無論用outerHTML,innerHTML,innerText也都不行啊!鬱悶啊,想盡辦法,仍無法解決,吐血斗餘仍不死心,望那位人士能幫忙解決,感激不盡.

解决方案 »

  1.   

    <style><%=str%></style>
    str后台公共参数  str ＝ "td.col{color:#ff0000;}"
      

  2.   

    拜託!樓上的,說明了用javascript來加入,如果用後台來加入,那根本不用想得那麼累啦,我還用得著花100分
      

  3.   

    function show(styleEx)
    {
     var ss = eval(styleEx);
     if(ss.style.display == "none")
     {
      eval(styleEx + ".style.display='block';");
     }
     else
     {
      eval(styleEx + ".style.display='none';");
     }
    }
    这样就是在动态的控制CSS了，其他的属性道理一样。
      

  4.   

    唉!我實在不知該如何說
    樓上說的我當然明白,但我已經說明是"用javascript動態加入<style>....</style>,注意不是style"
    重點強調是加入<style>...</style>這樣的標籤, 我要加入的是這個標籤的內容,而不是修改其他物件的CSS,完全沒回答到重點上簡單舉個例,html如下:
    <html>
    <head>
    <style id="styleTest">
    td.col1{color:#ff0000;}
    </style>
    <script language="javascript">
    function changeStyel()
    {
    ...
    }
    </script>
    </head>
    <body>
    <input type="button" value="click" onclick="changeStyel()">
    <table><tr><td class="col1">測試1</td><td class="col2">測試2</td></tr></table>
    </body>
    </html>請問changeStyel()怎麼寫,才能在HTML頁面中加入如下內容
    <style id="styleTest2">
    td.col2{font-size:10pt;}
    </style>強調強調再強調:
    我現在是通過changeStyel()加入<style>, 不要問我為甚麼,也不要用其他任何替代辦法去實現我上面的效果,上面只是舉例,我需要的是能正面給我答案謝謝每一位用心幫我解答的朋友了
      

  5.   

    呵呵 我明白了 下面代码经过试验 已经成功
    <style id="styleTest"> td.col1{color:#ff0000;}
    </style>
    <script language="javascript">
    function changeStyel()
    {
    document.Form1.innerHTML +="<style id='styleTest2'> td.col2{color:#ff0000;}</style>";
    }
    </script>
      

  6.   

    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">
    <input type="button" value="click" onclick="changeStyel()">
    <table>
    <tr>
    <td class="col1">測試1</td>
    <td class="col2">測試2</td>
    </tr>
    </table>
    </form>
    </body>
      

  7.   

    <html>
    <head>
    <style id="styleTest">
    td.col1{color:#ff0000;}
    </style>
    <script language="javascript">
    function changeStyel()
    {
    alert(document.styleSheets.length);
    var oStyleSheet=document.styleSheets[0];
    oStyleSheet.addRule("td.col2","color:#ff0000;");
    }
    </script>
    </head>
    <body>
    <input type="button" value="click" onclick="changeStyel()">
    <table><tr><td class="col1">測試1</td><td class="col2">測試2</td></tr></table>
    </body>
    </html>