一、jQuery的位置信息
jQuery的位置信息跟JS的client系列、offset系列、scroll系列封装好的一些简便api.
一、宽度和高度
获取宽度
|
1
|
.width()
|
描述：为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
console.log($('.box').width()); //获取宽度
console.log($('.box').css('width')); //获取css宽度
})
</script>
</body>
</html>
网页查看console
从结果中可以看出，css的width是带px的。所以获取宽度是，推荐使用.width()方法
设置宽度
|
1
|
.width( value )
|
描述：给每个匹配的元素设置CSS宽度。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button>变大</button>
<div class="box">
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('button').eq(0).click(function () {
$(this).next().width(200); //设置宽度
})
})
</script>
</body>
</html>
网页访问，点击变大按钮，div就会变大，最终效果如下：