js属性操作 -改变页面的字体大小 

   <style>
        .red{background-color: red;border: 1px solid #000000;color: #f1f1f1;}
        .yellow{background-color: yellow;border: 1px solid #000000;color: #f00;}
    </style>
    <script>
        window.onload=function(){
            var btnSub=document.getElementById("btnSub");
            var btnAdd=document.getElementById("btnAdd");
            var btnRed=document.getElementById("btnRed");
            var btnYellow=document.getElementById("btnYellow");
            var pText=document.getElementById("pText");

            var size=15;//默认字体是15px
            btnSub.onclick=function(){
                if(size>=5){//设置最小字体为5px
　　　　　　　　　　　　size-=2;//每次减2px
　　　　　　　　　　　　pText.style.fontSize=size+'px';　　
                }
               
            }

            btnAdd.onclick=function(){
　　　　　　　　if(size<=30){//设置最大字体是30px
                size+=2;//每次点击按钮字体增加2
                pText.style.fontSize=size+'px';//+'px'为了浏览器兼容
　　　　　　　　}
            }

            btnRed.onclick= function () {
                pText.className="red"; //为什么不写成 pText.class="red"???  答案:class是保留字,不能用
            }

            btnYellow.onclick=function(){
                pText.className="yellow";
            }

        }
    </script>
</head>
<body>
<p id="pText">苍老师:我想..苍老师:还想
    苍老师:真的想</p>
<input id="btnSub" type="button" value="字体变小"/>
<input id="btnAdd" type="button" value="字体变大"/>
<input id="btnRed" type="button" value="改变颜色-红色"/>
<input id="btnYellow" type="button" value="改变颜色-黄色"/>
</body>
</html>
　　

 

posted @ 2016-05-28 20:59  黑土白云  阅读(16020)  评论(0)    收藏  举报