sinat_29446327 2015-07-02 04:24 采纳率: 0%
浏览 2155

新手提问，页面制作知识

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

  • 写回答

7条回答 默认 最新

  • student-ai 2015-07-02 05:23
    关注
     <!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>
    评论

报告相同问题？