锋利的jQuery学习笔记-write less do more -实现字体的控制

最新推荐文章于 2021-08-29 16:51:40 发布

FightingITPanda

最新推荐文章于 2021-08-29 16:51:40 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

文章标签： jquery slice() parseInt 实现对字体的放大、缩小

本文链接：https://blog.youkuaiyun.com/FightingITPanda/article/details/80497947

本文介绍了一个简单的网页示例，通过点击按钮实现文本内容的字体放大和缩小效果。使用了HTML和jQuery来完成交互功能。

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

小示例：点击按钮实现字体的放大、缩小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>点击按钮实现字体大小的控制</title>

        <script src=jquery.js></script>
        <style>
            .msg{
                border :2px solid green
            }
            .color{
                color: green;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div class = msg>
            <div class = msg-caption>
                <span class = bigger style = "background:pink;border:2px solid">放大</span>
                <span class = smaller style = "background:pink;border:2px solid">缩小</span>
            </div><br>
            <div style="border:2px solid blue">
                <p id = "para">
                    hell everybody,i am kongfupanda,i like kongfu and panda and you~hell everybody,i am kongfupanda,i like kongfu and panda and you~hell everybody,i am kongfupanda,i like kongfu and panda and you~hell everybody,i am kongfupanda,i like kongfu and panda and you~
                </p>
            </div>
        </div>
    </body>
<script>
    $(function(){
        $("span").click(function(){
            var size = $("#para").css("font-size");//第一步 获取文本框中字体大小，返回16px
            var fontsize = parseInt(size,10)//转换为十进制 返回16
            var px = size.slice(-2);//回去16px倒数第二个位置开始的子字符串 px,以备后面用
            var which = $(this).attr("class");//获取到当前点击元素的class属性用来判断点击了哪个
            if(which == "bigger"){
                fontsize += 2;
                $("#para").addClass("color");
            }else if(which == "smaller"){
                fontsize -= 2;
                $("#para").removeClass("color");
            }
            $("#para").css("font-size",fontsize+px);
        })
    })
</script>
</html>

这里写图片描述