使用JQuery操作类样式

最新推荐文章于 2021-07-01 13:41:04 发布

原创最新推荐文章于 2021-07-01 13:41:04 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#使用JQuery操作类样式

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文介绍了一种使用jQuery库实现网页夜间模式切换的方法。通过编写简洁的jQuery代码，可以轻松地为网站添加夜间模式功能，提升用户体验。具体实现包括判断当前页面是否已应用夜间模式样式，并根据按钮点击事件自动切换。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
    <meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        .night {
            background-color: black;
        }
    </style>
    <input type="button" id="btn1" value="开关" />
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //JQuery操作类样式复杂写法
                //判断某个元素是否应用了某个类样式
                if ($("body").hasClass("night")) {
                    //如果该元素应用了此类样式，那么把该类样式移除
                    $("body").removeClass("night");
                } else {
                    //如果该元素不存在该类样式，那么把他添加上
                    $("body").addClass("night");
                }
                //JQuery操作类样式简单写法
                //Jquery对象的toggleClass()方法会自动帮助我们判断是否应用了某个类样式
                $("body").toggleClass("night");
            });
        });
    </script>
</body>
</html>