jQuery CSS-jQuery盒子模型

bootstrap.min.css跟平时的盒子模型不同，bootstrap： width里面包含了border 和 padding

1. css

$(document).ready(function(){
// $("div").css("width","100px");
// $("div").css("height","100px");
// $("div").css("background-color","red");
/* $("div").css({
width: "200px",
height: "200px",
backgroundColor: "red", //backgroundColor, you can not use ;
});*/
$("div").addClass("style1");
$("div").click(function(){
//$(this).addClass("style2");
$(this).removeClass("style1");
$(this).toggleClass("style2");
});
});

2. 盒子模型

<style>
#div{
width: 100px;
height: 100px;
margin: 50px;
padding: 100px;
border: 2px solid black;
background-color: red;
}
</style>

/* height() innerHeight() outHeight() */
$(document).ready(function(){
alert($("#div").height());
alert($("#div").innerHeight());
alert($("#div").outerHeight());
alert($("#div").outerHeight(true));
});