jQuery 获取元素尺寸
获取元素尺寸有三套方法四种使用方式
+ 不管在页面是不是占位, 这些方法都是获取元素的尺寸 意思是不管能不能看到 能算 原生的Js中 如果display none 的话 是获取不了的 会报错 而JQ不影响 你可以自己去尝试一下！
1. width() 和 height()
=> 语法: 元素集合.width() 或者 元素集合.height()
=> 获取的是元素内容位置的尺寸 （仅内容）
2. innerWidth() 和 innerHeight()
=> 语法: 元素集合.innerWidth() 或者 元素集合.innerHeight()
=> 获取的是元素 内容 + padding 区域的尺寸 （内 容 + 内边距 = innerXXX）
3. outerWidth() 和 outerHeight()
=> 语法: 元素集合.outerWidth() 或者 元素集合.outerHeight()
=> 获取的是元素 内容 + padding + border 区域的尺寸 （内容 + 内边距 + 边框 = outerXXX）
4. outerWidth(true) 和 outerHeight(true)
=> 语法: 元素集合.outerWidth(true) 或者 元素集合.outerHeight(true)
=> 获取的是元素 内容 + padding + border + margin 区域的尺寸 (内容 + 内边距 + 边框 + 外边距 = outerXXX ( true ) )
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jqsourse.js"></script> <style> div{ width: 100px; /*内容 宽*/ height: 100px; /*内容 高*/ padding: 20px; /*内边距*/ margin: 10px; /*外边距*/ border: 5px solid red; /*边框*/ } </style> </head> <body> <div></div> <script type="application/javascript"> /** 上面是语句 下面是结果 * * $('div').height() 100 $('div').width() 100 $('div').innerWidth() 140 $('div').innerHeight() 140 $('div').outerWidth() 150 $('div').outerHeight() 150 $('div').outerHeight(true) 170 $('div').outerWidth(true) 170 */ </script> </body> </html>