正文
JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
* 能够使用jQuery设置尺寸
* .width() width
* .innerWidth() width + padding
* .outerWidth() width + padding + border
* .outerWidth(true) width + padding + border + margin
* 能够使用jQuery操作坐标
* .offset() 永远基于网页文档（document）获取
* .position() 基于定位的祖先元素(offsetParent)获取
demo <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: palegreen;
padding:20px;
border: 10px solid darkcyan;
margin: 50px;
}
</style>
<script src="lib/jquery-1.12.2.js"></script> </head>
<body>
<div class="box">
width: 200px<br/>
height: 200px<br/>
padding:20px<br/>
border: 10px solid darkcyan<br/>
margin: 50px<br/> </div>
</body>
</html>
<script>
console.log(".css('width')获取盒子宽度=width:"+$('.box').css('width'));
console.log("width()获取盒子宽度= width :"+$('.box').width());
console.log("innerwidth()获取盒子宽度= width + padding :"+$('.box').innerWidth());
console.log("outerWidth()获取盒子宽度= width + padding + border:"+$('.box').outerWidth());
console.log("outerWidth(true)获取盒子宽度= width+ padding + border + margin:"+$('.box').outerWidth(true)); </script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: palegreen;
padding:20px;
border: 10px solid darkcyan;
margin: 50px;
}
</style>
<script src="lib/jquery-1.12.2.js"></script> </head>
<body>
<div class="box">
width: 200px<br/>
height: 200px<br/>
padding:20px<br/>
border: 10px solid darkcyan<br/>
margin: 50px<br/> </div>
</body>
</html>
<script>
console.log(".css('width')获取盒子宽度=width:"+$('.box').css('width'));
console.log("width()获取盒子宽度= width :"+$('.box').width());
console.log("innerwidth()获取盒子宽度= width + padding :"+$('.box').innerWidth());
console.log("outerWidth()获取盒子宽度= width + padding + border:"+$('.box').outerWidth());
console.log("outerWidth(true)获取盒子宽度= width+ padding + border + margin:"+$('.box').outerWidth(true)); </script>
