jQuery入门(18) 操作HTML元素的大小

jQuery 提供下面方法来控制HTML元素的大小：

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

一般影响HTML元素 大小各部分的示意图如下所示：

jQuery width()和height()方法

width()用来设置或取得元素的宽度，height()设置和取得元素的高度。

下面代码取得<center>元素的高度和宽度。

$("button").click(function(){
   var txt="";
   txt+="Width: " + $("#center1").width() + "</br>";
   txt+="Height: " + $("#center1").height();
   $("#center1").html(txt);
 });

jQuery的innerWidth()和innerHeight()方法
innerWidth() 返回元素包括Padding的宽度，innerHeight()返回包括Padding的高度。

jquery的outerWidth()和 outerHeight()方法
outerWidth()返回包括 padding 和 border的宽度，outerHeight()返回包括padding 和　border的高度。

而outWidth(true)和 outHeight(true) 返回包括padding, border和margin的高度和宽度。

下面的例子设置指定

元素的宽度和高度：

$("button").click(function(){
   $("#center1").width(500).height(500);
 });

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索方法
， 元素
， width
， 高度
， height
， 宽度
， innerHeight
， outerHeight
， jquery操作html
， outerWidth
， outerWidth()
， outerHeight()
， innerWidth()
innerHeight()
jquery操作dom元素、jquery操作父页面元素、jquery操作伪元素、jquery操作元素、jquery操作html元素，以便于您获取更多的相关知识。