新手提问，页面制作知识

给页面设定两个不同的简单样式（文字颜色大小）通过按钮来选择样式。用js，html，css制作。新手程序员，虽然学了些，但是用起来就不行，求各位前辈帮忙给个思路或者写个小例子，感激不尽

 <!DOCTYPE HTML >
<html>
<head>
<title>切换</title>
<meta charset="utf-8"/>
<style type="text/css">

  .fontsmall {
    font-size: 12px;
    color:red;
  }

  .fontmax {
    font-size: 72px;
    color:blue;
  }




</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
     $("#changefonts").click(function(){
        var fontclass=$("#testf").attr("class");
        if(typeof(fontclass)=="undefined"){
          //如果还没有class,就添加一个
          $("#testf").addClass("fontsmall");
        }else{
          //切换class
          if(fontclass=="fontsmall"){  
              $("#testf").removeClass("fontsmall");//先删除原来的class
              $("#testf").addClass("fontmax");//添加新的

              //也可以下面这样写.
              //$("#testf").removeClass("fontsmall").addClass("fontmax");
          }else if(fontclass=="fontmax"){
               $("#testf").removeClass("fontmax");
               $("#testf").addClass("fontsmall");
          }
        }
     })



  })


</script>
</head>
<body>
  <div id="testf" class="fontsmall">这里是测试文字.</div>

  <div style="margin-top:10px;">
    <input type="button" value="切换" id="changefonts">
  </div>
</body>
</html>

可以使用jquery（js库）操作，方便一些。

 <html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
        .c1{
            color:red;
        }

        .c2{
            font-size:20pt;
        }
    </style>

   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script type="text/javascript">
       $(function(){
            $("#btn1").click(function(){
                $("p").addClass("c1").removeClass("c2");
            });

            $("#btn2").click(function(){
                $("p").addClass("c2").removeClass("c1");
            });
       })
   </script>
</head>
<body>
   <p>测试文字</p>
   <button id="btn1">改变文字大小</button>
   <button id="btn2">改变文字颜色</button>
</body>
</html>

<br> .c1{<br> color:red;<br> }</p> <pre><code> .c2{ font-size:20pt; } </style> </code></pre> <p><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><br> <script type="text/javascript"><br> $(function(){<br> $("#btn1").click(function(){<br> $("p").addClass("c1").removeClass("c2");<br> });</p> <pre><code> $("#btn2").click(function(){ $("p").addClass("c2").removeClass("c1"); }); }) </code></pre> <p></script><br> </head><br> <body><br> <p>测试文字</p><br> <button id="btn1">改变文字大小</button><br> <button id="btn2">改变文字颜色</button><br> </body><br> </html></p>

...csdn也要改进一下，贴了的东西没法改，也没完善的预览功能，害得别人狂贴哈哈

切换
.fontsmall { font-size: 12px; color:red; } .fontmax { font-size: 72px; color:blue; } $(document).ready(function(){ $("#changefonts").click(function(){ var fontclass=$("#testf").attr("class"); if(typeof(fontclass)=="undefined"){ //如果还没有class,就添加一个 $("#testf").addClass("fontsmall"); }else{ //切换class if(fontclass=="fontsmall"){ $("#testf").removeClass("fontsmall");//先删除原来的class $("#testf").addClass("fontmax");//添加新的 //也可以下面这样写. //$("#testf").removeClass("fontsmall").addClass("fontmax"); }else if(fontclass=="fontmax"){ $("#testf").removeClass("fontmax"); $("#testf").addClass("fontsmall"); } } }) })

这里是测试文字.

br> function show(str){
document.getElementById("color").style.color=str;
}

测试文字

改变文字大小
改变文字颜色