如何用javascritp动态管理样式表


//ModifyCss和CreatCss可以一样的
function ModifyCss(name,value)
{
    document.write("\n<style>."+name+"{"+ value +";}</style>");
}

解决方案 »

  1.   

    比如 
    <script   type="text/javascript"> 
    creatCss = function(){document.write("<style>.style_01{color:red;}</style>")}
    AppendCss = function(){document.write("<style>.style_02{color:red;}</style>")}
    ModifyCss = function(){
    //
    document.styleSheets[0].rules[0].style.font-size="12px" ;
    }CreatCss();   //   创建样式style_01 document.write(" <p   class='style_01'> 测试文字A </p> "); 
    AppendCss();   //   创建样式style_02 
    document.write(" <p   class='style_02'> 测试文字B </p> "); 
    //   甚至修改style_01 
    ModifyCss("style_01","font-size:12px"); 
    </script> 
      

  2.   

    <script   type="text/javascript">
    CreatCss();   //   创建样式style_01
    AppendCss();   //   创建样式style_02
    ModifyCss("style_01","font-size:12px");
    </script <script   type="text/javascript">
    document.write(" <p   class='style_01'> 测试文字A </p> ");
    document.write(" <p   class='style_02'> 测试文字B </p> ");
    </script 
      

  3.   


     <style type="text/css">  
    a,div,p {color:red}  
    h5 {color:blue}  
    </style>  
    <script>  
    if(document.styleSheets[0].cssRules){  
    alert(document.styleSheets[0].cssRules[1].selectorText+":"+document.styleSheets[0].cssRules[1].style.cssText)  
    }else{  
    alert(document.styleSheets[0].rules[1].selectorText+":"+document.styleSheets[0].rules[1].style.cssText)  
    }  
    </script> 
    根据这个改改吧
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>未命名頁面</title>
        
        <script type="text/javascript" language="javascript">
        <!--
        
        function CreateCss()
        {
            var style = '';
            style += '<style type="text/css" id="style1">';
            style += '.style_01 {background-color:blue;}';
            style += '</style>';
            
            document.body.innerHTML += style;
        }
        
        function AppendCss()
        {
            var style = '';
            style += '<style type="text/css" id="style2">';
            style += '.style_02 {background-color:yellow;}';
            style += '</style>';
            
            document.body.innerHTML += style;
        }
        
        function ModifyCss()
        {
            var styleSheet = document.styleSheets.item("style1");
            var style = styleSheet.rules.item("style_01");
            style.style.fontSize = "12px";
        }
        
        //-->
        </script>
    </head>
    <body>
        <p id="p1">測試文字A</p>
        <p id="p2">測試文字B</p>
        <script type="text/javascript" language="javascript">
        <!--
        
        CreateCss();
        document.getElementById('p1').className = "style_01";
        AppendCss();
        document.getElementById('p2').className = 'style_02';
        ModifyCss();
        
        //-->
        </script>
        
    </body>
    </html>
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>未命名頁面</title>
        
        <script type="text/javascript" language="javascript">
        <!--
        
        function CreateCss()
        {
            var style = '';
            style += '<style type="text/css" id="style1">';
            style += '.style_01 {background-color:blue;}';
            style += '</style>';
            document.write(style);
        }
        
        function AppendCss()
        {
            var style = '';
            style += '<style type="text/css" id="style2">';
            style += '.style_02 {background-color:yellow;}';
            style += '</style>';
            document.write(style);
        }
        
        function ModifyCss()
        {
            var styleSheet = document.styleSheets.item("style1");
            var style = styleSheet.rules.item("style_01");
            style.style.fontSize = "12px";
        }
        
        CreateCss();
        document.write('<p class="style_01">測試文字A</p>');
        AppendCss();
        document.write('<p class="style_02">測試文字B</p>');
        ModifyCss();
        
        //-->
        </script>
    </head>
    <body> 
    </body>
    </html>
      

  6.   

     
    <script language="javascript">
    function test()
    {
        //判断浏览器 IE
        if (typeof ActiveXObject != "undefined")
        {
          CreatCss();   //   创建样式style_01 
          document.write(" <p   class='style_01'> 测试文字A </p> ");     }
       //判断浏览器 FireFox
        else if (window.XMLHttpRequest) 
       {
         AppendCss();   //   创建样式style_02 
         document.write(" <p   class='style_02'> 测试文字B </p> "); 
         //   甚至修改style_01 
         ModifyCss("style_01","font-size:12px");   }
    }<script language="javascript">DoCallTimer()</script>
      

  7.   

    最后一行错了
    <script language="javascript">test()</script>