几个关于元素宽高的方法height():带参数设置，不带参数获取,参数是number类型width():带参数设置，不带参数获取,参数是number类型innerHeight() :内边距+内容的高度innerWidth() :内边距+内容的宽度outerHeight：上下内边距+内容+上下边框outerWidth :左右内边距+内容+左右边框

案例测试：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>元素宽度与高度</title> <style type="text/css"> #container{ width:200px; height:200px; padding:20px; margin:30px; border:5px solid red; } </style> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> $(function(){ console.log("width():"+$("#container").width()); console.log("height():"+$("#container").height()); console.log("innerWidth()"+$("#container").innerWidth()); console.log("innerHeight():"+$("#container").innerHeight()); console.log("outerWidth():"+$("#container").outerWidth()); console.log("outerHeight():"+$("#container").outerHeight()); }) </script></head><body> <div id = "container"></div></body></html>

运行结果：