• 技术文章 >web前端 >js教程

    javascript如何设置字体大小

    coldplay.xixicoldplay.xixi2021-04-08 15:49:54原创119

    javascript设置字体大小的方法:首先设置布局,并写两个按钮;然后通过点击加减按钮来控制文字的大小,代码为【oPtxt.style.fontSize=num+'px'】。

    本教程操作环境:windows7系统、javascript1.8.5版,DELL G3电脑。

    javascript设置字体大小的方法:

    首先还是先看布局,简单写一句话,并写两个按钮:

    <input id="Btn1" type="button" value="+" name=""/>
    <input id="Btn2" type="button" value="-" name=""/>
    <p id="p1" style="font-size:14px;">这是一些文字这是一些文字这是一些文字这是一些文字</p>

    效果图如下:

    9acc584ad17542eeea68bf09f35e17a.png

    然后,就要通过点击加减按钮来控制文字的大小了,js代码如下:

    <script>
        window.onload= function(){
            var oPtxt=document.getElementById("p1");
            var oBtn1=document.getElementById("Btn1");
            var oBtn2=document.getElementById("Btn2");
            var num = 14; /*定义一个初始变量*/
            oBtn1.onclick = function(){
                num++;
                oPtxt.style.fontSize=num+'px';
            };
            oBtn2.onclick = function(){
                num--;
                oPtxt.style.fontSize=num+'px';
            }
        }
    </script>

    相关免费学习推荐:javascript视频教程

    以上就是javascript如何设置字体大小的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript 字体大小
    上一篇:JavaScript如何添加删除元素 下一篇:浏览器不支持javascript怎么办
    第15期线上培训班

    相关文章推荐

    • html怎么改字体颜色• css怎么设置字体为微软雅黑• CSS如何设置字体粗细• css中字体怎么设置

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网