js实现html中文字的放大缩小功能

最新推荐文章于 2023-10-07 09:39:40 发布

早睡早起头发好

最新推荐文章于 2023-10-07 09:39:40 发布

阅读量2.5k

点赞数 1

文章标签： javascript html 开发语言

本文链接：https://blog.csdn.net/m0_51977446/article/details/124822507

版权

按钮处代码：

 <div class="font_size_adjust">
            <input type="button" name="big" value=" + " onclick="plus()">
            &nbsp改变字体大小&nbsp
            <input type="button" name="small" value=" - " onclick="minus()">
        </div>

效果：
在这里插入图片描述
文段处代码；注意使用id名；字体大小这一项要使用内联样式，而不能在内部样式或者外部样式中定义。

<div id="main_text" style="font-size: 20px">
                <p>
                    红军长征是中国工农红军在极端艰险的条件下先后进行的战略大转移。1934年10月开始中国共产党领导红一方面军、
                    二方面军、红四方面军和红二十五军分别从各苏区向陕甘苏区进行战略大撤退和大转移。
                    四路红军长征总里程达六万五千里，其中红一方面军长征里程最远，为二万五千里。
                </p><br/>
</div>

字体调大调小函数，设定了字体大小的上下限，过大或者过小时弹窗提示。

<script>
    function plus(){
       var para=document.getElementById("main_text");
       var s=para.style.fontSize;
       if(parseInt(s)==40) alert("已是最大字体！");
       else{
           var size=parseInt(s)+1;
           para.style.fontSize=size+"px";
       }



    }
    function minus(){
        var para=document.getElementById("main_text");
        var s=para.style.fontSize;
        if(parseInt(s)==10)alert("已是最小字体！")
        else{
            var size=parseInt(s)-1;
            para.style.fontSize=size+"px";
        }

    }
</script>