js 文字的放大缩小案例

最新推荐文章于 2024-01-02 14:04:58 发布

Casablanca_jhBi

最新推荐文章于 2024-01-02 14:04:58 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_37243717/article/details/79504423

js 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现字体大小的动态调整功能。用户可以通过点击按钮来增加或减小页面中文字的大小，范围限制在16到26像素之间。此外，还提供了一些基本的CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
        #box{
            width: 1000px;
            margin : 50px auto;
        }
        #box .btn{
            display: inline-block;
            width: 50px;
            height: 30px;
            background: #000;
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        #box p{
            margin : 10px 0;
        }

    </style>
</head>
<body>
    <div id="box">
        <span id="add" class="btn">+</span>
        <span id="del" class="btn">-</span>
        <p>hahaha</p>
        <p></p>
        <img src="images/pic1.jpg" alt="">
        <p>demo</p>
        <p>早点起床，醒醒觉</p>
        <img src="images/pic1.jpg" alt="">
    </div>

    <script>
        var oAdd = document.getElementById("add"),
            oDel = document.getElementById("del"),
            oBox = document.getElementById("box"),
            size = 16;

        oAdd.onclick = function (){
            //size = size + 1;
            //size += 1;
            size ++;
            if( size > 26){
                alert("瓜皮,不能再调皮咯!");
                size = 26;
            };
            oBox.style.fontSize = size + "px";
        };
        oDel.onclick = function (){
           // size = size - 1;
           // size -= 1;
            size --;
            if( size < 16 ){
                alert("瓜皮,不能再调皮咯!");
                size = 16;
            }
            oBox.style.fontSize = size + "px";
        };
    </script>
</body>
</html>