jQuery 处理尺寸
使用 jQuery，可以轻松处理元素和浏览器窗口的尺寸。
jQuery 尺寸方法
jQuery 有几种处理尺寸的重要方法:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
jQuery 尺寸
jQuery width() 与 height() 方法
width() 方法设置或返回元素的宽度（不包括填充、边框和边距）。
height() 方法设置或返回元素的高度（不包括填充、边框和边距）。
下面的实例返回指定的 <div> 元素的宽度和高度:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){var txt = "";txt += "Width of div: " + $("#div1").width() + "</br>";txt += "Height of div: " + $("#div1").height();$("#div1").html(txt);});});</script><style>#div1 {height: 100px;width: 300px;padding: 10px;margin: 3px;border: 1px solid blue;background-color: lightblue;}</style></head><body><div id="div1"></div><br><button>显示 div 的尺寸</button><p>width() - 返回元素的宽度</p><p>height() - 返回元素的高度</p></body></html>
jQuery innerWidth() 与 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括填充）。
innerHeight() 方法返回元素的高度（包括填充）。
下面的实例返回指定的 <div> 元素的内部宽度和高度:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){var txt = "";txt += "Width of div: " + $("#div1").width() + "</br>";txt += "Height of div: " + $("#div1").height() + "</br>";txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";txt += "Inner height of div: " + $("#div1").innerHeight();$("#div1").html(txt);});});</script></head><style>#div1 {height: 100px;width: 300px;padding: 10px;margin: 3px;border: 1px solid blue;background-color: lightblue;}</style><body><div id="div1"></div><br><button>显示 div 的尺寸</button><p>innerWidth() - 返回元素的宽度（包括填充）</p><p>innerHeight() - 返回元素的高度（包括填充）</p></body></html>
jQuery outerWidth() 与 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括填充和边框）。
outerHeight() 方法返回元素的高度（包括填充和边框）。
下面的实例返回指定的 <div> 元素的外部宽度和高度::
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){var txt = "";txt += "Width of div: " + $("#div1").width() + "</br>";txt += "Height of div: " + $("#div1").height() + "</br>";txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";txt += "Outer height of div: " + $("#div1").outerHeight();$("#div1").html(txt);});});</script><style>#div1 {height: 100px;width: 300px;padding: 10px;margin: 3px;border: 1px solid blue;background-color: lightblue;}</style></head><body><div id="div1"></div><br><button>显示 div 的尺寸</button><p>outerWidth() - 返回元素的宽度（包括填充和边框）。</p><p>outerHeight() - 返回元素的高度（包括填充和边框）。</p></body></html>
outerWidth(true) 方法返回元素的宽度（包括填充、边框和边距）。
outerHeight(true) 方法返回元素的高度（包括填充、边框和边距）。
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){var txt = "";txt += "Width of div: " + $("#div1").width() + "</br>";txt += "Height of div: " + $("#div1").height() + "</br>";txt += "Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";txt += "Outer height of div (margin included): " + $("#div1").outerHeight(true);$("#div1").html(txt);});});</script><style>#div1 {height: 100px;width: 300px;padding: 10px;margin: 3px;border: 1px solid blue;background-color: lightblue;}</style></head><body><div id="div1"></div><br><button>显示 div 的尺寸</button><p>outerWidth(true) - 返回元素的宽度（包括填充、边框和边距）</p><p>outerHeight(true) - 返回元素的高度（包括填充、边框和边距）</p></body></html>
jQuery 更多的 width() 与 height()
以下实例返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){var txt = "";txt += "Document width/height: " + $(document).width();txt += "x" + $(document).height() + "\n";txt += "Window width/height: " + $(window).width();txt += "x" + $(window).height();alert(txt);});});</script></head><body><button>显示文档和窗口的尺寸</button></body></html>
下面的实例设置指定的 <div> 元素的宽度和高度:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").width(500).height(500);});});</script><style>#div1 {height: 100px;width: 300px;padding: 10px;margin: 3px;border: 1px solid blue;background-color: lightblue;}</style></head><body><div id="div1"></div><br><button>改变 div 的大小</button></body></html>
jQuery HTML 参考
有关所有 jQuery HTML 方法的完整概述，请访问本站的 jQuery HTML/CSS 参考。