JQurey DOM 对class属性操作

最新推荐文章于 2021-04-16 19:28:16 发布

_七七

最新推荐文章于 2021-04-16 19:28:16 发布

阅读量178

点赞数

分类专栏： JQuery 文章标签： javascript java html js css

本文链接：https://blog.csdn.net/qq_43472877/article/details/106749017

版权

JQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

对class属性操作

addClass(): 添加class属性值
removeClass(): 删除class属性值
toggleClass():切换class属性
toggleClass(“id”):
判断如果元素对象上存在class=“id”,则将属性值one删除掉。
如果元素对象上不存在class=“id”,则添加。
相当于同时实现了addClass和removeClass的功能；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class属性操作</title>
    <script src="js/jquery-3.4.1.min.js"></script>

    <style>
        /*待用的样式*/
        .second{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-color: yellow;
        }
    </style>

    <script>
        $(function () {

            //采用属性增加样式
            $("#b1").click(function () {
                $("#div1").prop("class","second");
            })

            //采用addClass
            $("#b2").click(function () {
                $("#div1").addClass("second");
            })

            //采用removeClass
            $("#b3").click(function () {
                $("#div1").removeClass("second");
            })

            //切换样式toggleClass
            $("#b4").click(function () {
                $("#div1").toggleClass("second");
            })
            
            //获取id为div1的背景颜色
            $("#b5").click(function () {
                var backgroundColor = $("#div1").css("backgroundColor");
                alert(backgroundColor)
            })
        })
    </script>
</head>

<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <input type="button" id="b1" value="按钮1">
    <input type="button" id="b2" value="addClass">
    <input type="button" id="b3" value="removeClass">
    <input type="button" id="b4" value="toggleClass">
    <input type="button" id="b5" value="获取id为div1的背景颜色">

</body>
</html>

_七七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQurey DOM 对class属性操作

对class属性操作addClass(): 添加class属性值removeClass(): 删除class属性值toggleClass():切换class属性toggleClass(“id”):判断如果元素对象上存在class=“id”,则将属性值one删除掉。如果元素对象上不存在class=“id”,则添加。相当于同时实现了addClass和removeClass的功能；<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录