JQ css操作 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            
        </title>
        <link rel="stylesheet" type="text/css" href="JQ_css.css"/>
    </head>
    <body>
        
        <div id="div1">
            this is div
        </div>
        <div class="back" id="div2">
            this is div2
        </div>
        <button type="button" id="btn1">click</button><br>
        
        <p id="p1">this is p</p>
        <button type="button" id="btn2">click</button><br>
        
            
        <div id="div3" class="back">
            
        </div>
        <button type="button" id="btn3">click</button><br>
        
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="JQ_css.js"></script>
            
        
    </body>
</html>
.back{
    background-color: aqua;
    width: 200px;
    height: 200px;
    border: solid;
}
$(document).ready(function(){
    /**
     * 操作CSS
     */
    //添加删除类
    $("#btn1").click(function(){
        // $("#div1").addClass("back");
        // $("#div2").removeClass("back");
        $("#div1").toggleClass("back");
    })
    //设置css
    $("#btn2").click(function(){
        //返回css值
        console.log($("#div2").css("border"));
        //设置属性
        $("#p1").css({"background-color":"yellow","font-size":"200%"});
    })
    //尺寸
    $("#btn3").click(function(){
        //width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
        var txt="";
        txt+="Width: " + $("#div3").width() + "</br>";
        txt+="Height: " + $("#div3").height();
        $("#div3").html(txt);
        //innerWidth() 方法返回元素的宽度（包括内边距）。
        //outerWidth() 方法返回元素的宽度（包括内边距和边框）。
        //outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
    })
})

 

posted @ 2022-04-04 18:37  lwx_R  阅读(58)  评论(0)    收藏  举报