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

最新推荐文章于 2024-01-02 14:04:58 发布

weixin_30483013

最新推荐文章于 2024-01-02 14:04:58 发布

阅读量525

点赞数

原文链接：http://www.cnblogs.com/bravolove/p/5538303.html

版权

   <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.οnclick=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>

转载于:https://www.cnblogs.com/bravolove/p/5538303.html

weixin_30483013

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js属性操作 -改变页面的字体大小

<style> .red{background-color: red;border: 1px solid #000000;color: #f1f1f1;} .yellow{background-color: yellow;border: 1px solid #000000;color: #f00;} </style>...
复制链接

扫一扫