首页前端开发JavaScriptjavascript怎么改变字体大小

javascript怎么改变字体大小

时间2024-01-29 21:40:02发布访客分类JavaScript浏览1034
导读:收集整理的这篇文章主要介绍了javascript怎么改变字体大小,觉得挺不错的,现在分享给大家,也给大家做个参考。在javascript中,可以使用Style对象的fontSize属性来改变字体大小,该属性可以设置文本的字体大小,语法格式“...
收集整理的这篇文章主要介绍了javascript怎么改变字体大小,觉得挺不错的,现在分享给大家,也给大家做个参考。

在javascript中,可以使用Style对象的fontSize属性来改变字体大小,该属性可以设置文本的字体大小,语法格式“元素对象.style.fontSize="值"”。

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

在javascript中,可以使用Style对象的fontSize属性来改变字体大小。

下面我们通过示例来看看fontSize属性是怎么改变字体大小的。

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

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

效果图如下:

然后,就要通过点击加减按钮来控制文字的大小了,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>
    

点击“+”按钮一下,那么文字就会增加一像素,一直点击便会一直变大:

点击“-”按钮一下,那么文字就会减小一像素,一直点击便会一直变小:

@H_126_36@

就是这么的简单,一定要注意定义初始变量的时候,一定要是全局变量,而你需要操作按钮才使文字有变化的话,那么变量的增加和减小就一定是局部变量。

【相关推荐:javascript学习教程

说明:HTML DOM Style fontSize 属性

fontSize属性设置或返回文本的字体大小。

语法:

  • 返回fontSize属性:

object.style.fontSize
  • 设置fontSize属性:

object.style.fontSize = "value"

属性值:

描述
@H_406_86@
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • 将字体大小设置为不同的固定大小,从xx-small到xx-large
    smaller将字体大小减少一个相对单位
    larger将字体大小增加一个相对单位
    length以长度单位定义字体大小
    %将font-size设置为父元素字体大小的%

    更多编程相关知识,请访问:编程视频!!

    以上就是javascript怎么改变字体大小的详细内容,更多请关注其它相关文章!

    声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

    javascript

    若转载请注明出处: javascript怎么改变字体大小
    本文地址: https://pptw.com/jishu/591632.html
    javascript怎么将时间戳转为日期格式 javascript document对象的方法有哪些

    游客 回复需填写必要信息