学习使用js修改字体颜色大小等属性的方法

  • 字体变大变小
  • 效果图


字体变大变小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体大小变换</title>
</head>
<style>

</style>


<body>

<input id="Btn1" type="button" value="+" name=""/>
<input id="Btn2" type="button" value="-" name=""/>

<p id="p1" style="font-size:14px;" onclick="chcolor()">奇葩天地网www.qipa250.com</p>

<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';
        }
    }

    function chcolor() {
        document.getElementById("p1").style.color = "red";
    }
</script>
</body>

</html>

效果图

javascript 设置字体大小 js设置字体大小和颜色_学习

javascript 设置字体大小 js设置字体大小和颜色_学习_02

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

document.getElementById(“t”).style.color=“red” 修改字体颜色