鍍金池/ 教程/ HTML/ 操作 HTML 元素的大小
jQuery UI Tab 示例（一）
jQuery UI Datepicker 示例（四）
jQuery UI 示例
jQuery UI Slider 示例（二）
jQuery UI Dialog 示例（一）
HTML Get
動畫效果
終止動畫
回調(diào)函數(shù)
方法鏈
jQuery UI Button 示例（一）
jQuery UI Autocomplete 示例（三）
jQuery UI Autocomplete 示例（二）
設置或取得元素的 CSS class
jQuery UI 概述
基本語法
jQuery UI Datepicker 示例（一）
jQuery UI Autocomplete 示例（一）
jQuery UI Spiner 示例
jQuery UI Tab 示例（二）
淡入淡出效果
顯示/隱藏內(nèi)容
HTML Set
jQuery UI Tooltip 示例
jQuery UI Slider 示例（一）
讀寫 HTML 元素的 css 屬性
jQuery UI Datepicker 示例（二）
添加HTML元素
操作 HTML 元素的大小
jQuery UI Datepicker 示例（五）
滑動效果
jQuery UI Dialog 示例（二）
jQuery UI Menu 示例
jQuery UI 基本工作過程
jQuery UI Button 示例（二）
jQuery UI Dialog 示例（三）
jQuery UI Datepicker 示例（三）
Selectors
jQuery UI Progressbar 示例
Events
jQuery UI Accordion 示例
刪除HTML元素

操作 HTML 元素的大小

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

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

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

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/13.png" alt="" />

jQuery width()和 height()方法

width()用來設置或取得元素的寬度，height()設置和取得元素的高度。

下面代碼取得

元素的高度和寬度。

$("button").click(function(){
   var txt="";
   txt+="Width: " + $("#div1").width() + "</br>";
   txt+="Height: " + $("#div1").height();
   $("#div1").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(){
   $("#div1").width(500).height(500);
 });