一、jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
//alert($("#div1").width()); //获取这个元素的宽度，类型是number 跟$("#div1").css("width")获取到的是不一样的这样方法获取到的是string类型的数据
//$('#div1').width(500); //设置元素长度，直接传数值，默认加px
//$('#div1').width('500pt'); //同上，设置了pt 单位
$('#div1').width(function (index, value) { //index 是索引，value 是原本值
return value - 100; //无须调整类型，直接计算
});
alert($("#div1").height());
$('div').height(500); //设置元素高度，直接传数值，默认加px
$('div').height('500pt'); //同上，设置了pt 单位
$('div').height(function (index, value) { //index 是索引，value 是原本值
return value - 1; //无须调整类型，直接计算
});
/*获取元素的宽高时是不包括border,padding,margin 类型是number方便与以后计算*/
});
</script>
</head>
<body>
<div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("#div1").width(400).height(320);
});
});
</script>
</head>
<body>
<button>action</button>
<div id="div1" style="height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取文档的宽度和高度</div>
</body>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("#div1").width(function(index,width){ //这种方法还可以传人一个参数即一个函数
return width+500+"px"; //虽然可以不加px会智能的添加，但还是建议加上单位，这样更加清晰
});
});
});
</script>
</head>
<body>
<button>action</button>
<div id="div1" style="height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取文档的宽度和高度</div>
</body>
二、jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
alert($("#div1").innerWidth());
alert($("#div1").innerHeight());
/*获取元素的宽高时是不包括border,margin、只包括padding*/
});
</script>
</head>
<body>
<div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>
三、jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
alert($("#div1").outerWidth());
alert($("#div1").outerHeight());
/*获取元素的宽高时是不包括margin、只包括padding,border*/
});
</script>
</head>
<body>
<div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>
这两个方法可以传入参数：true（表示包括margin）、false（表示不包括margin（默认））
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
alert($("#div1").outerWidth(true));//传入参数表示在获取元素的宽度的时候，不仅包括padding和border外，还包括margin
alert($("#div1").outerHeight(false));
/*获取元素的宽高时是包括margin,padding,border*/
});
</script>
</head>
<body>
<div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>
四、获取文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
var docW = $(document).width();
var docH = $( document).height();
var WocW = $(window).width();
var WocH = $( window).height();
var so = $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）
alert(docW);
alert(docH);
alert(WocW);
alert(WocH);
alert(so);
//用一句话理解就是：当网页滚动条拉到最低端时，$(document).height() == $(window).height() + $(window).scrollTop()。
//当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()。
});
</script>
</head>
<body>
<div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取文档的宽度和高度</div>
<div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取浏览器窗口（视口）的宽度和高度</div>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
</body>
不建议使用$("html").height()、$("body").height()这样的高度。原因：
$("body").height()：body可能会有边框，获取的高度会比$(document).height()小；
$("html").height()：在不同的浏览器上获取的高度的意义会有差异，说白了就是浏览器不兼容。
$(window).height()值有问题，返回的不是浏览器窗口的高度？原因：网页没有加上<!DOCTYPE>声明。
五、元素偏移方法：
1、offset()
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
//alert($("#div1").offset());//返回的是一个对象
//alert($("#div1").offset().top);//div离视口顶端距离
//alert($("#div1").offset().left);//div离视口左边距离
});
});
</script>
</head>
<body>
<button>action</button>
<div id="div1" style="height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0; margin-left:30px;">获取文档的宽度和高度</div>
</body>
2、position()
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
alert($("#p1").position().left);//相对于div左边的定位是10px
alert($("#p1").offset().left); //相对于视口左边的距离是20px
});
});
</script>
</head>
<body>
<button>action</button>
<div style="height:100px; width:200px; border:2px solid #0F0; position:relative">
<p id="p1" style="position:absolute; left:10px">获取文档的宽度和高度</p>
</div>
</body>
3、scroll()
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
alert($(window).scrollTop()); //获取当前滚动条的位置
// $(window).scrollTop(300); //设置当前滚动条的位置
});
});
</script>
</head>
<body>
<div style="height:100px; width:200px; border:2px solid #0F0; position:relative">
<p id="p1" style="position:absolute; left:10px">获取文档的宽度和高度</p>
</div>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<button>action</button>
</body>