jquery的基本使用(5)

踢球的打工仔2025-12-19 8:36

jquery操作元素的样式

index.html:

复制代码

<html>
    <head>
        <title>js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>
    <body>
        <div id="content_id">显示的内容</div>
        <button id="add_btn">添加class</button>
        <button id="remove_btn">删除class</button>
        <button id="toggle_btn">toggle切换class</button>
        <button id="get_btn">获取css属性</button>
        <button id="change_btn">更改css属性</button>
    </body>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./index.js">
    </script>
    <style>
        .testCla{
            color:red;
        }
    </style>
</html>

index.js:

复制代码

$(function(){
    var dom = $("#content_id");
    $("#add_btn").click(function(){
        dom.addClass("testCla");
    });
    $("#remove_btn").click(function(){
        dom.removeClass("testCla");
    });
    $("#toggle_btn").click(function(){
        dom.toggleClass("testCla");
    });
    $("#get_btn").click(function(){
        console.log(dom.css("backgroundColor"));
    });
    $("#change_btn").click(function(){
        dom.css("backgroundColor","yellow")
    });
});

注：

addClass:用来给元素添加一个class；

removeClass:用来给元素删除一个class;

toggleClass:用来动态的添加和删除class;

css:用来获取一个元素的属性；同样的也可以用来设置一个元素属性；

拓展：

css的方法设置属性时，需要使用驼形命名属性，驼形命名法：首字母小写，之后每个单词首字母大写；