JQuery css-jquery Box Model

Bootstrap.min.css is different from the usual box model, Bootstrap:width contains border and 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 don't use;
});*/
$ ("div"). addclass ("Style1");
$ ("div"). Click (function () {
$ (this). addclass ("Style2");
$ (this). Removeclass ("Style1");
$ (this). Toggleclass ("Style2");
});
});

2. Box model

<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));
});

JQuery css-jquery Box Model