jQuery APIリファレンススタイル操作:高さと幅
- height()〔要素の高さを取得〕
- height(val)〔要素の高さを設定〕
- width()〔要素の幅を取得〕
- width(val)〔要素の幅を設定〕
- innerHeight()〔最初にマッチした要素の内部の高さを取得 〕
- innerWidth()〔最初にマッチした要素の内部の幅を取得 〕
- outerHeight([options])〔最初にマッチした要素の外部の高さを取得 〕
- outerWidth([options])〔最初にマッチした要素の外部の幅を取得 〕
height()
要素の高さを取得
2009/2/27
最初にマッチした要素の現在の高さをピクセル値で取得します。
jQuery v1.2以上では、ウィンドウとドキュメントの高さも取得できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>スタイル操作:高さと幅:height()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ function showHeight(elm, h) { $("#res").html(elm+"の高さは、<strong>"+h+"px</strong>です。"); $("h1").css("background-color","","none"); } $("#btn_h1").click(function () { showHeight("H1要素", $("p").height()); $("h1").css("background-color","yellow"); }); $("#btn_d").click(function () { showHeight("ドキュメント", $(document).height()); }); $("#btn_w").click(function () { showHeight("ウィンドウ", $(window).height()); }); }); </script> <!-- CSS --> <style type="text/css"> strong { color:red; } </style> </head> <body> <div id="wrap"> <h1>スタイル操作:高さと幅:height()の使用例 | jQuery</h1> <!-- CODE --> <p> <button id="btn_h1">H1要素の高さを取得</button> <button id="btn_d">ドキュメントの高さを取得</button> <button id="btn_w">ウィンドウの高さを取得</button> </p> <div id="res"></div> <!-- / CODE --> </div> </body> </html>
height(val)
要素の高さを設定
2009/2/27
マッチした各要素にCSSで高さを設定します。
第1引数valには、CSSのheightプロパティに設定する値を指定します。
単位を指定しない場合は、ピクセル値として解釈されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>スタイル操作:高さと幅:height()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".boxes li").one('click', function () { $(this).height(40).css({cursor:"auto", backgroundColor:"orange"}); }); }); </script> <!-- CSS --> <style type="text/css"> .boxes ul { margin:0 0 1em 0; padding:0; height:10em; overflow:hidden; } .boxes li { margin:0 10px 0 0; padding:0; list-style:none; width:10em; height:10em; line-height:10em; float:left; background-color:blue; color:#fff; text-align:center; } </style> </head> <body> <div id="wrap"> <h1>スタイル操作:高さと幅:height()の使用例 | jQuery</h1> <p>▼ボックスをクリックした時に、クリックしたボックスの幅を40pxに変更します。</p> <!-- CODE --> <div class="boxes cf"> <ul> <li>ボックス</li> <li>ボックス</li> <li>ボックス</li> <li>ボックス</li> </ul> </div> <!-- / CODE --> </div> </body> </html>
ブロック要素の高さを揃える
各ブロック要素の高さを取得し、すべてのブロック要素の高さを最大の高さに設定します。
参照:Equal Height Columns with jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>スタイル操作:高さと幅:height()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ equalHeight($(".column")); }); function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } </script> <!-- CSS --> <style type="text/css"> .column { float:left; width:200px; margin:10px; border:1px solid #000; background-color:#fff; } </style> </head> <body> <div id="wrap"> <h1>スタイル操作:高さと幅:height()の使用例 | jQuery</h1> <p>▼各ブロック要素の高さを取得し、すべてのブロック要素の高さを最大の高さに設定します。</p> <p>参照:<a href='http://www.cssnewbie.com/equal-height-columns-with-jquery/'>Equal Height Columns with jQuery</a></p> <!-- CODE --> <div class="clearfix"> <div class="column"> 1行目<br/> 2行目<br/> 3行目<br/> 4行目<br/> 5行目 </div> <div class="column"> 1行目 </div> <div class="column"> 1行目<br/> 2行目<br/> 3行目 </div> </div> <!-- / CODE --> </div> </body> </html>
width()
要素の幅を取得
2009/2/27
最初にマッチした要素の現在の幅をピクセル値で取得します。
jQuery v1.2以上では、ウィンドウとドキュメントの幅も取得できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>スタイル操作:高さと幅:width()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ function showWidth(elm, w) { $("#res").html(elm+"の幅は、<strong>"+w+"px</strong>です。"); $("h1").css("background-color","","none"); } $("#btn_h1").click(function () { showWidth("H1要素", $("p").width()); $("h1").css("background-color","yellow"); }); $("#btn_d").click(function () { showWidth("ドキュメント", $(document).width()); }); $("#btn_w").click(function () { showWidth("ウィンドウ", $(window).width()); }); }); </script> <!-- CSS --> <style type="text/css"> strong { color:red; } </style> </head> <body> <div id="wrap"> <h1>スタイル操作:高さと幅:width()の使用例 | jQuery</h1> <!-- CODE --> <p> <button id="btn_h1">H1要素の幅を取得</button> <button id="btn_d">ドキュメントの幅を取得</button> <button id="btn_w">ウィンドウの幅を取得</button> </p> <div id="res"></div> <!-- / CODE --> </div> </body> </html>
width(val)
要素の幅を設定
2009/2/27
マッチした各要素にCSSで高さを設定します。
第1引数valには、CSSのwidthプロパティに設定する値を指定します。
単位を指定しない場合は、ピクセル値として解釈されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>スタイル操作:高さと幅:width()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".boxes li").one('click', function () { $(this).width(40).css({cursor:"auto", backgroundColor:"orange"}); }); }); </script> <!-- CSS --> <style type="text/css"> .boxes ul { margin:0 0 1em 0; padding:0; height:10em; overflow:hidden; } .boxes li { margin:0 10px 0 0; padding:0; list-style:none; width:10em; height:10em; line-height:10em; float:left; background-color:blue; color:#fff; text-align:center; } </style> </head> <body> <div id="wrap"> <h1>スタイル操作:高さと幅:width()の使用例 | jQuery</h1> <p>▼ボックスをクリックした時に、クリックしたボックスの高さを40pxに変更します。</p> <!-- CODE --> <div class="boxes cf"> <ul> <li>ボックス</li> <li>ボックス</li> <li>ボックス</li> <li>ボックス</li> </ul> </div> <!-- / CODE --> </div> </body> </html>
innerHeight()
最初にマッチした要素の内部の高さを取得
2009/2/27
最初にマッチした要素の内部の高さ(borderは除く/paddingは含める)をピクセル値で取得します。 このメソッドは表示・非表示にされている要素の両方で動作します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>スタイル操作:高さと幅:innerHeight()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#sample").html("innerHeight: <strong>"+$("#sample").innerHeight()+"px</strong>"); }); </script> <!-- CSS --> <style type="text/css"> #sample { margin:10px; padding:10px; width:300px; height:50px; border:2px solid #000; background:yellow; line-height:50px; text-align:center; } </style> </head> <body> <div id="wrap"> <h1>スタイル操作:高さと幅:innerHeight()の使用例 | jQuery</h1> <p>▼要素の内部の高さ(borderは除く/paddingは含める)を取得します。</p> <!-- CODE --> <div id="sample"></div> <!-- / CODE --> </div> </body> </html>
innerWidth()
最初にマッチした要素の内部の幅を取得
2009/2/27
最初にマッチした要素の内部の幅(borderは除く/paddingは含める)をピクセル値で取得します。 このメソッドは表示・非表示にされている要素の両方で動作します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>スタイル操作:高さと幅:innerWidth()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#sample").html("innerWidth: <strong>"+$("#sample").innerWidth()+"px</strong>"); }); </script> <!-- CSS --> <style type="text/css"> #sample { margin:10px; padding:10px; width:300px; height:50px; border:2px solid #000; background:yellow; line-height:50px; text-align:center; } </style> </head> <body> <div id="wrap"> <h1>スタイル操作:高さと幅:innerWidth()の使用例 | jQuery</h1> <p>▼要素の内部の幅(borderは除く/paddingは含める)を取得します。</p> <!-- CODE --> <div id="sample"></div> <!-- / CODE --> </div> </body> </html>
outerHeight([options])
最初にマッチした要素の外部の高さを取得
2009/2/27
最初にマッチした要素の外部の高さ(デフォルトで設定されている、のborderとpaddingを含める)をピクセル値で取得します。 このメソッドは表示・非表示にされている要素の両方で動作します。
オプションの第1引数optionsにTRUEを指定すると、marginを含めた外部の高さを取得することができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>スタイル操作:高さと幅:outerHeight()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#sample").html("outerHeight: <strong>"+$("#sample").outerHeight()+"px</strong>"); $("#sample2").html("outerHeight: <strong>"+$("#sample").outerHeight(true)+"px</strong>"); }); </script> <!-- CSS --> <style type="text/css"> #sample, #sample2 { margin:10px; padding:10px; width:300px; height:50px; border:2px solid #000; background:yellow; line-height:50px; text-align:center; } </style> </head> <body> <div id="wrap"> <h1>スタイル操作:高さと幅:outerHeight()の使用例 | jQuery</h1> <p>▼要素の外部の高さ(borderとpaddingは含める)を取得します。</p> <!-- CODE --> <div id="sample"></div> <p>▼outerHeight(true)とするとmarginも含めた外部の高さを取得します。</p> <div id="sample2"></div> <!-- / CODE --> </div> </body> </html>
outerWidth([options])
最初にマッチした要素の外部の幅を取得
2009/2/27
最初にマッチした要素の外部の幅(デフォルトで設定されている、borderとpaddingを含める)をピクセル値で取得します。 このメソッドは表示・非表示にされている要素の両方で動作します。
オプションの第1引数optionsにTRUEを指定すると、marginを含めた外部の幅を取得することができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>スタイル操作:高さと幅:outerWidth()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#sample").html("outerWidth(): <strong>"+$("#sample").outerWidth()+"px</strong>"); $("#sample2").html("outerWidth(true): <strong>"+$("#sample").outerWidth(true)+"px</strong>"); }); </script> <!-- CSS --> <style type="text/css"> #sample, #sample2 { margin:10px; padding:10px; width:300px; height:50px; border:2px solid #000; background:yellow; line-height:50px; text-align:center; } </style> </head> <body> <div id="wrap"> <h1>スタイル操作:高さと幅:outerWidth()の使用例 | jQuery</h1> <p>▼要素の外部の幅(borderとpaddingは含める)を取得します。</p> <!-- CODE --> <div id="sample"></div> <p>▼outerWidth(true)とするとmarginも含めた外部の高さを取得します。</p> <div id="sample2"></div> <!-- / CODE --> </div> </body> </html>
button要素の次にある兄弟要素をスライドアニメーション
参考:Slide Elements in Different Directions

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>スタイル操作:高さと幅:outerWidth()の使用例 | jQuery</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#slideleft button").click(function(){ var $lefty = $(this).next(); $left=parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0; $lefty.animate({ left: $left }); }); $('#slidemarginleft button').click(function() { var $marginlefty = $(this).next(); $margin=parseInt($marginlefty.css('marginLeft'),10) == 0 ? $marginlefty.outerWidth() : 0; $marginlefty.animate({ marginLeft: $margin }); }); }); </script> <!-- CSS --> <style type="text/css"> .slide{ position:relative; width:350px; height:100px; background-color:#ffffcc; border:1px solid #999; overflow:hidden; } .slide button { margin:0.7em 0 0 0.7em; } .slide div { position:absolute; left:0;bottom:0; width:100%; height:3em; line-height:3em; padding:0 10px; background-color:orange; } </style> </head> <body> <div id="wrap"> <h1>スタイル操作:高さと幅:outerWidth()の使用例 | jQuery</h1> <p>参考:<a href='http://www.learningjquery.com/2009/02/slide-elements-in-different-directions'>Slide Elements in Different Directions</a></p> <!-- CODE --> <p>▼button要素の次にある兄弟要素の左位置をアニメーションします</p> <div id="slideleft" class="slide"> <button>スライド!</button> <div>ボタンをクリックするとアニメーションします</div> </div> <br> <p>▼button要素の次にある兄弟要素の左外余白をアニメーションします</p> <div id="slidemarginleft" class="slide"> <button>スライド!</button> <div>ボタンをクリックするとアニメーションします</div> </div> <!-- / CODE --> </div> </body> </html>