Home > Web Front-end > JS Tutorial > How to change font size in javascript

How to change font size in javascript

青灯夜游
Release: 2021-06-18 14:46:13
Original
15725 people have browsed it

In JavaScript, you can use the fontSize property of the Style object to change the font size. This property can set the font size of the text. The syntax format is "element object.style.fontSize="value"".

How to change font size in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In javascript, you can use the fontSize property of the Style object to change the font size.

Let’s take an example to see how the fontSize attribute changes the font size.

First of all, let’s look at the layout, write a simple sentence and two buttons:

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

The rendering is as follows:

Then , you need to control the size of the text by clicking the plus and minus buttons. The js code is as follows:

<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+&#39;px&#39;;
        };
        oBtn2.onclick = function(){
            num--;
            oPtxt.style.fontSize=num+&#39;px&#39;;
        }
    }
</script>
Copy after login

Click the " " button once, and the text will increase by one pixel. If you keep clicking, it will keep getting bigger:

Click the "-" button once, and the text will be reduced by one pixel. If you keep clicking, it will continue to become smaller:

It’s that simple. Be sure to note that when defining the initial variable, it must be a global variable. If you need to operate the button to make the text change, then the increase and decrease of the variable must be a local variable.

[Related recommendations: javascript learning tutorial]

Description: HTML DOM Style fontSize attribute

## The #fontSize property sets or returns the font size of text.

Syntax:

  • Return the fontSize property:

  • object.style.fontSize
    Copy after login
  • Set the fontSize property:

  • object.style.fontSize = "value"
    Copy after login
    Attribute value:

    ##Value##xx-smallsmallerReduce the font size by one relative unitlargerReduce the font size Increase the size by a relative unitlengthDefines the font size in length units%Will font-size is set to % of the font size of the parent element For more programming-related knowledge, please visit: Programming Video
    Description
      x-small
    • small
    • medium
    • large
    • x-large
    • xx-large
    • Set the font size to different fixed sizes, from xx-small to xx-large
    ! !

    The above is the detailed content of How to change font size in javascript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template