jQuery CSS方法+jQuery盒子模型

http://api.jquery.com/height/

 JS文件：

$(document).ready(function () {
    //CSS方法
    //第一种写法
    //$("div").css("width", "100px");
    //$("div").css("height", "100px");
    //$("div").css("background", "#FF0000")

    //第二种写法
    //$("div").css({
    //    width:"100px",height:"100px",backgroundColor:"#00FF00"
    //});

    //addClass  toggleClass
    $("div").addClass("style1");
    $("div").click(function () {
        //$(this).addClass("style2");
        //$(this).removeClass("style1");
        $(this).toggleClass("style2")//切换样式
    });
});

 CSS文件：

.style1{
    width:100px;
    height:100px;
    background-color:aqua;
}
.style2{
    width:100px;
    height:100px;
    background-color:aquamarine;
}

盒子模型：HTML文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../JQuery/jquery-1.8.0.min.js"></script>
    <script src="box.js"></script>
    <style>
        #div {
            width: 100px;
            height: 100px;
            margin: 50px; /*外边距*/
            padding: 50px; /*内边距*/
            border: 2px solid aqua; /*边框加颜色*/
            background-color:aquamarine;
        }
    </style>
</head>
<body>
    <div id="div"></div>
</body>
</html>

 

posted @ 2023-05-29 13:56  它的眼角开过光  阅读(13)  评论(0)    收藏  举报