巅峰霸主 > 代码分享 > 源代码分享 >

jQuery实现点击按钮改变字体大小js+html代码

时间:2021-03-23 19:49:50  来源:巅峰霸主网  作者:转载 点击:
摘要:点击按钮实现字体增大或缩小的js+html代码……

无论在各大网站中,还是个人小网页,都会有改变字体大小的设置。下面就用两个小按钮,一个div存放内容,来实现这个小功能。

HTML代码:

<input type="button" id="up" value="字号增大">&nbsp;<input type="button" id="down" value="字号减小">
<div id="wrapper">文字文字文字文字文字文字文字文字文字文字文字</div>

JavaScript代码:

<script type = "text/javascript">
       // 获取个元素
        var oUp = document.getElementById(‘up’);   // 注意引号,要用英文半角
        var oDown = document.getElementById('down');
        var oDiv = document.getElementById('wrapper');
        var num = 16;  // 默认字体大小
        oUp.onclick = function () {
               num += 1.2;
               oDiv.style.fontSize = num + 'px';
        }
        oDown.onclick = function () {
            num-= 1.2;
            oDiv.style.fontSize = num+'px';
        }
</script>

 


(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部