javaweb/JQuery/src/dom/class_css.html at master · CPU-Code/javaweb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>样式操作</title>
    <script src="../js/jquery-3.3.1.min.js"></script>

    <style type="text/css">
        div{
            width: 150px;
            height: 100px;
            margin: 20px;
            background: #22aa99;
            border: #000000 1px solid;
            float:left;
            font-size: 15px;
            font-family:Roman;
        }

        .second{
            width: 200px;
            height: 150px;
            margin: 30px;
            background: #dd19da;
            border: #000000 2px solid;
            float: left;
            font-size: 20px;
            font-family: Roman;
        }
    </style>

    <!--
    对class属性操作
        1. addClass():添加class属性值
        2. removeClass():删除class属性值
        3. toggleClass():切换class属性
            * toggleClass("one"):
                * 判断如果元素对象上存在class="one"，则将属性值one删除掉。  如果元素对象上不存在class="one"，则添加
    -->
    <script type="text/javascript">
        $(function () {
            // 采用属性增加样式(改变id=one的样式)
           $("#b1").click(function () {
               $("#one").prop("class", "second");
           });

            //value=" addClass"
            $("#b2").click(function () {
                $("#one").addClass("second");
            });

            // removeClass
            $("#b3").click(function () {
                $("#one").removeClass("second");
            });

            // 切换样式
            $("#b4").click(function () {
                $("#one").toggleClass("second");
            });

            //通过css()获得id为one背景颜色
            $("#b5").click(function () {
                var backgroundColor = $("#one").css("backgroundColor");
                alert("backgroundColor = " + backgroundColor);
            });

            // 通过css()设置id为one背景颜色为绿色
            $("#b6").click(function () {
                $("#one").css("backgroundColor", "green");
            });
        });
    </script>
</head>
<body>
    <input type="button" value="保存" class="mini" name="ok">
    <input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1">
    <input type="button" value="addClass" id="b2">
    <input type="button" value="removeClass" id="b3">
    <input type="button" value="切换样式" id="b4">
    <input type="button" value="通过css()获得id为one背景颜色" id="b5">
    <input type="button" value="通过css()设置id为one背景颜色为绿色" id="b6">

    <div id="one">id="one"</div>
</body>
</html>