jQuery-学习二-CSS和盒子模型_H5之家 - 中国HTML5教程资源分享第一站

在javascript中能够为元素添加上css样式，在jquery也是行的，它主要用了.css() ， addClass()。
css()是在jquery上写上属性，而.addClass()是添加外部的CSS文件。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQCSS</title> <script src="jQuery-3.2.1.min.js"></script> <script src="test.js"></script> <link type="text/css" href="test.css"> </head> <body> <div></div> </body> </html> $(document).ready(function () { $("div").css({ width: "100px", height: "100px", backgroundColor: "#ff0000" }); })

通过js的代码你就能为元素添加属性了下面用一下外部引用文件。
css文件

.style1{ width: 100px; height: 100px; background-color: blue; } .style2{ width: 100px; height: 100px; background-color: green; }

$(document).ready(function () { $("div").addClass("style1"); $("div").click(function () { $("div").toggleClass("style2"); }) })

从上面看到除了addClass方法，我还用了toggleClass方法，这是类似一个样式切换器，在二种样式之间不断的切换。

下面简单说一下盒子模型。首先说一下什么是盒子模型，在网页中一个元素占有的空间的大小是有几个部分组成的，它们分别是元素的外边距，元素的边框，元素的内边距，元素内容。而它们也构成了一个盒子模型。
而jquery中能够用它提供的方法来获取到盒子的大小，而它的方法主要是height() , innerHeight() , outHeight() , outHeight(参数)。

下面用代码来解释：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQCSS</title> <script src="jquery-3.2.1.min.js"></script> <script src="test.js"></script> <style> #div{ width: 100px; height: 100px; padding: 50px; margin: 50px; background-color: green; border: 1px solid blue; } </style> <body> <div></div> <button>content</button> <button>content+padding</button> <button>content+padding+border</button> <button>content+padding+border+margin</button> </body> </html>

js代码

$(document).ready(function () { $("#btn1").click(function () { alert($("#div").height()); //内容的高度 }); $("#btn2").click(function () { alert($("#div").innerHeight()); //内容加内边距的高度 }); $("#btn3").click(function () { alert($("#div").outerHeight()); //内容加内边距加边框的高度 }); $("#btn4").click(function () { alert($("#div").outerHeight(true)); //整个盒子的高度 }) })

上面除了能获取高度外，其它也是能够获取到的，如宽度啊，什么的。