宽度和高度：
获取宽度： .width()
为匹配的元素集合中，获取第一个元素的的当前计算宽度值，这个方法不接受任何参数。 .css(width)和 .width()之间的区别是后者返回一个没有单位的数值，而前者返回的是带有完整单位的字符串，当一个元素的宽度需要数学计算的时候使用.width（）方法。
设置宽度：.width(value)
给每个匹配的元素都设置CSS宽度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin:0; } div{ width: 100px; height: 100px; background-color: red; margin-bottom: 20px; } </style> <script type="text/javascript" src = "../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ console.log($('div').width(200)); }); </script> </head> <body> <div></div> <div></div> </body> </html>
innerHeight()和innerWidth()
获取内部宽：.innerWidth()
为匹配的元素集合中获取第一个元素的当前计算宽度值，包括padding但是不包括border。
这个方法不适用于window和document对象，对于这些对象可以使用.width()代替。
设置内部宽：.innerWidth(value)
为匹配的集合中的每个元素设置CSS内部宽度，如果这个‘value’参数提供一个数字，jQuery会自动加上像素单位(px)
获取内部高：.innerHeight()
为匹配的元素集合中获取第一个元素的当前计算高度值，包括padding，不包括border。
这个方法不适用于window和document对象，对于这些对象可以使用.height()代替。
设置内部高：.innerHeight(value):
为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin:0; } div{ width: 100px; height: 100px; background-color: red; border:1px solid green; margin-bottom: 20px; } </style> <script type="text/javascript" src = "../../jquery-3.3.1.js"></script> <script type="text/javascript"> // $(function(){ // console.log($('div').width(200)); // console.log($('div').height(200)); // }); $(function(){ console.log($('div').innerHeight()); console.log($('div').innerWidth()); console.log($('div').innerHeight(200)); console.log($('div').innerWidth(200)); }) </script> </head> <body> <div></div> <div></div> </body> </html>
outerWidth()和outerHeight()
获取外部宽：.outerWidth()
获取匹配元素集合中的第一个元素的当前计算外部宽度，包括padding，border和可选的margin.
默认值为 false. 表明是否在计算是包含元素的margin值。true即为包含。false:即为不包含。
设置外部宽：.outerWidth(value)
为匹配的每个元素设置CSS外部宽度。
获取外部高：.outerHeight()
获取匹配元素集合中的第一个元素的当前计算外部高度，包括padding，border和可选的margin.
默认值为 false. 表明是否在计算是包含元素的margin值。true即为包含。false:即为不包含。
设置外部高：.outerHeight(value)
为匹配集合中的每个元素设置CSS外部高度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin:0; } div{ width: 100px; height: 100px; background-color: red; border:1px solid green; margin-bottom: 20px; margin-left: 20px; } </style> <script type="text/javascript" src = "../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ console.log($('div').outerWidth()); console.log($('div').outerWidth(true)); console.log($('div').outerHeight()); console.log($('div').outerHeight(true)); $('div').outerWidth(200); $('div').outerHeight(200); console.log($('div').outerWidth()); console.log($('div').outerWidth(true)); console.log($('div').outerHeight()); console.log($('div').outerHeight(true)); }) </script> </head> <body> <div></div> <div></div> </body> </html>
偏移
.offset()
返回值：Object，.offset()返回一个包含top和left属性的对象。
在匹配的元素集合中，获取第一个元素的当前坐标，坐标的数值是相对于文档。
注意：jQuery不支持获取隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标。
设置偏移：.offset(coordinaters)
设置匹配元素集合中每一个元素的坐标，坐标相对于文档。
coordinates：类型Object，一个包含top和left属性的对象，用整数指明元素的新顶部和左边坐标。
$(function(){ console.log($('div').offset()); $('div').offset({top:20,left:30}); console.log($('div').offset()); })
滚动距离：
水平方向获取值：.scrollLeft()
获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）
设置值：.scrollLeft(value)
设置每个匹配元素的水平方向滚动条位置.
垂直方向上获取值：scrollTop()
获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）
设置值：.scorllTop(value)
设置每个匹配元素的垂直方向滚动条位置。
$(function(){ console.log($(document).scrollLeft()); console.log($(document).scrollTop()); })