JQuery CSS操作及jQuery的盒子模型

最新推荐文章于 2020-11-20 10:19:33 发布

Summer-green

最新推荐文章于 2020-11-20 10:19:33 发布

阅读量1.1k

点赞数

分类专栏： jquery 文章标签： jquery css 盒子模型

本文链接：https://blog.csdn.net/summergreenhtml/article/details/47819371

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

PS :height是指内容的高度不包含padding margin…
innerheight 包含element+padding

代码如下：

HTML部分：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS操作及jQuery的盒子模型</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="CSS%20hezi.js"></script>
    <link rel="stylesheet" type="text/css" href="hezi.css">
    <style>
        #d1{
            width: 200px;
            height: 200px;
            padding: 30px;
            margin: 50px;
            border: 2px solid red;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
<div></div>
<div id="d1"></div>
</body>
</html>

CSS部分

.style{
     width: 100px;
     height: 100px;
     background-color: green;

 }

.style1{
    width: 100px;
    height: 100px;
    background-color: crimson;

}

Javascript部分

/**
 * Created by qing on 2015/8/20.
 */
$(document).ready(function () {
    //写法一
    //$("div").css("width","100px");
    //$("div").css("height","100px");
    //$("div").css("background-color","blue")

    //写法二
    //$("div").css({
    //    width:"100px",height:"100px",backgroundColor:"blue"
    //});

    //方法三
    $("div").addClass("style");

    $("div").click(function(){

        //$(this).addClass("style1");
        //$(this).removeClass("style"); //移除样式
        $(this).toggleClass("style1");

    });

    //alert($("#d1").height());//只包含element高度
    //alert($("#d1").innerHeight()); //包含element+padding(上下)
    //alert($("#d1").outerHeight());//element+padding(上下）+border（上下）
    alert($("#d1").outerHeight(true)); //包含全部的高度
});