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

最新推荐文章于 2023-11-16 10:31:18 发布

徊忆羽菲

最新推荐文章于 2023-11-16 10:31:18 发布

阅读量3.2k

点赞数 2

分类专栏： Javascript Html Jquery 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/128565452

版权

Html 同时被 3 个专栏收录

254 篇文章 9 订阅

订阅专栏

Javascript

235 篇文章 6 订阅

订阅专栏

Jquery

192 篇文章 2 订阅

订阅专栏

本文展示了如何使用JavaScript操作DOM元素，通过点击按钮动态改变字体的大小和颜色。示例代码中，有两个按钮分别用于增大和减小字体大小，同时定义了一个函数`chcolor()`来切换字体颜色为红色。这些功能是通过设置`fontSize`和`color`样式属性实现的。

摘要由CSDN通过智能技术生成

学习使用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>