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

新手提问，页面制作知识

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

  • 写回答

7条回答 默认 最新

  • JPF1024 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>
    评论

报告相同问题？

悬赏问题

  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn，请教个问题 flink启动yarn-session.sh连不上hadoop，这个整了好几天一直不行，求帮忙看一下怎么解决
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 lammps拉伸应力应变曲线分析
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟，应力应变曲线问题