- 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>运行结果：
最后欢迎关注博主的网络课堂：http://edu.51cto.com/lecturer/11220344.html
jQuery中几个关于元素宽高方法的区别
原文地址：http://blog.51cto.com/11230344/2299943