一、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 {
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 {
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就会变大，最终效果如下：
高度
获取高度
|
1
|
.height() |
描述：获取匹配元素集合中的第一个元素的当前计算高度值。
-
这个方法不接受任何参数。
设置高度
|
1
|
.height( value ) |
描述：设置每一个匹配元素的高度值。
2、innerHeight()和innerWidth()
获取内部宽
|
1
|
.innerWidth() |
描述：为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。
ps:这个方法不适用于window 和 document对象，对于这些对象可以使用.width()代替。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
100px;
height: 100px;
background-color: red;
padding: 50px;
border: 1px solid green;
}
</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').innerWidth());//获取内部宽度
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
100px;
height: 100px;
background-color: red;
padding: 50px;
border: 1px solid green;
}
</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').innerWidth());//获取内部宽度
})
</script>
</body>
</html>
网页查看console，输出100
虽然盒子宽度是100，但是由于设置了padding:50。所以总宽度为200
设置内部宽
|
1
|
.innerWidth(value); |
描述： 为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）
获取内部高
|
1
|
.innerHeight() |
描述：为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
ps:这个方法不适用于window 和 document对象，对于这些对象可以使用.height()代替。
设置内部宽
|
1
|
.innerHeight(value); |
描述： 为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）
3.outWidth和outHeight()
获取外部宽
|
1
|
.outerWidth( [includeMargin ] ) |
描述：获取匹配元素集合中第一个元素的当前计算外部宽度（包括padding，border和可选的margin）
-
includeMargin (默认:
false)类型：Boolean一个布尔值，表明是否在计算时包含元素的margin值。 - 这个方法不适用于
window和document对象，可以使用.width()代替
举例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
100px;
height: 100px;
background-color: red;
padding: 50px;
border: 1px solid green;
}
</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').outerWidth());//获取外部宽度
})
</script>
</body>
</html>
网页查看console，输出202
虽然盒子宽度是100，但是由于设置了padding:50。所以宽度为200，加上边框1px，最终总宽度为202
举例2：
为true时，表示在计算时包含元素的margin值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
100px;
height: 100px;
background-color: red;
padding: 50px;
border: 1px solid green;
margin-left: 50px;
}
</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').outerWidth(true));//获取外部宽度
})
</script>
</body>
</html>
网页查看console，输出252。因为加上了margin-left的值50px。
设置外部宽
|
1
|
.outerWidth( value ) |
描述： 为匹配集合中的每个元素设置CSS外部宽度。
获取外部宽
|
1
|
.outerHeight( [includeMargin ] ) |
描述：获取匹配元素集合中第一个元素的当前计算外部高度（包括padding，border和可选的margin）
-
includeMargin (默认:
false)类型：Boolean一个布尔值，表明是否在计算时包含元素的margin值。 - 这个方法不适用于
window和document对象，可以使用.width()代替
设置外部高
|
1
|
.outerHeight( value ) |
描述： 为匹配集合中的每个元素设置CSS外部高度。
3、偏移
获取
|
1
|
.offset() |
返回值：Object 。.offset()返回一个包含top 和 left属性的对象 。
描述：在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。
注意：jQuery不支持获取隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标
举例1：