jquery-development
/
jQuery的操作样式.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mp {
            background-color: aqua;
        }

        .mpp {
            background-color: rgb(26, 255, 0);
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
    </style>
</head>

<body>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <p id="p3" class="mpp">p3</p>
    <p id="p4">p4</p>
    <div class="button">111</div>

    <button id="toggleButton">显示盒子</button>
    <div id="box" style="display: none;">这是一个盒子</div>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        $("#p1").css("color", "red")
        $("#p2").css({ "color": "red", "font-size": "40px" })
        $("#p3").addClass("mp")
        $("#p3").removeClass("mpp")
        $(".button").click(function () {
            $("#p4").toggleClass("mpp")
        })

        $(document).ready(function () {
            $('#toggleButton').click(function () {
                // 切换盒子的显示和隐藏
                $('#box').toggle();

                // 根据盒子的显示状态更改按钮的文本
                if ($('#box').is(':visible')) {
                    $(this).text('隐藏盒子');
                } else {
                    $(this).text('显示盒子');
                }
            });
        });

    </script>
</body>

</html>