如何动态使用CSS


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不常用html</title>
<style type="text/css">
code{ border:dotted 1px #e1e1e1; background:#efefef; display:block; padding:4px; margin:4px 0;}
del{ color:#d00;}
dfn{ font-style:normal;}
</style>
<script defer="defer" type="text/javascript">
//<![CDATA[
window.onload=function(){
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
var oHtml=document.documentElement;
var oHead=oHtml.firstChild;
var oStyle=oHead.childNodes[2];
var flag=true;

var oTmp=new Object();
if(flag){
oTmp=oHead.removeChild(oStyle);
btn.innerHTML=(flag)?"不使用CSS":"恢复使用CSS";
flag=false;
}else{
oHead.appendChild(oTmp);
alert(oTmp.innerHTML);
}
alert(flag);
//alert(oStyle.innerHTML);
}
}
//]]>
</script>
</head><body>
<button>不使用CSS</button>
<hr />
<p>这里是一段代码：<code>&lt;style&gt;<ins>一段文字</ins>被<del>删除</del>&lt;/style&gt;</code>请<kbd>复制</kbd>它</p>
</body>
</html>我现在要实现的是可以点击按钮来切换是否使用css。如何解决？谢谢。

解决方案 »

  1.   


    <!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>不常用html</title>
    <style type="text/css">
    code{ border:dotted 1px #e1e1e1; background:#efefef; display:block; padding:4px; margin:4px 0;}
    del{ color:#d00;}
    dfn{ font-style:normal;}
    </style>
    <script defer="defer" type="text/javascript">
    //<![CDATA[
    window.onload=function(){
        var btn=document.getElementsByTagName("button")[0];
        var style=document.getElementsByTagName("style")[0];
        btn.onclick=function() {
            if(this.innerHTML=="不使用CSS") {
                this.innerHTML="使用CSS";
                style.disabled=true;
            }else {
                this.innerHTML="不使用CSS";
                style.disabled=false;
            }
        }
    }
    //]]>
    </script>
    </head><body>
    <button>不使用CSS</button>
    <hr />
    <p>这里是一段代码：<code>&lt;style&gt;<ins>一段文字</ins>被<del>删除</del>&lt;/style&gt;</code>请<kbd>复制</kbd>它</p>
    </body>
    </html>