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

How to set font size in javascript

coldplay.xixi
Release: 2023-01-04 09:35:16
Original
8798 people have browsed it

How to set the font size in JavaScript: First set the layout and write two buttons; then click the plus and minus buttons to control the size of the text. The code is [oPtxt.style.fontSize=num 'px'].

How to set font size in javascript

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.

How to set the font size in javascript:

First of all, look at the layout, write a simple sentence, and write 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

Effect The picture is as follows:

How to set font size in javascript

#Then, you need to control the text size 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

Related free Learning recommendation: javascript video tutorial

The above is the detailed content of How to set 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