您的位置：首页 > Web前端 > JQuery

jQuery-学习二-CSS和盒子模型

2017-10-15 21:29 302 查看

在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" rel="stylesheet" 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 id="div"></div>
<button id="btn1">content</button>
<button id="btn2">content+padding</button>
<button id="btn3">content+padding+border</button>
<button id="btn4">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
9e70
(function () {
alert($("#div").outerHeight(true));   //整个盒子的高度
})
})

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery css

相关文章推荐

新的分享

章节导航