jQuery APIリファレンススタイル操作：高さと幅
- height()〔要素の高さを取得〕
- height(val)〔要素の高さを設定〕
- width()〔要素の幅を取得〕
- width(val)〔要素の幅を設定〕
- innerHeight()〔最初にマッチした要素の内部の高さを取得 〕
- innerWidth()〔最初にマッチした要素の内部の幅を取得 〕
- outerHeight([options])〔最初にマッチした要素の外部の高さを取得 〕
- outerWidth([options])〔最初にマッチした要素の外部の幅を取得 〕
height()
要素の高さを取得
2009/2/27
height() 戻り値：整数
最初にマッチした要素の現在の高さをピクセル値で取得します。
jQuery v1.2以上では、ウィンドウとドキュメントの高さも取得できます。
設置イメージ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(){
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
height(val) 戻り値：jQuery
マッチした各要素にCSSで高さを設定します。
第1引数valには、CSSのheightプロパティに設定する値を指定します。
単位を指定しない場合は、ピクセル値として解釈されます。
設置イメージheight(val)の使用例サンプルを見る
<!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
height(val)の使用例サンプルを見る
<!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
width() 戻り値：整数
最初にマッチした要素の現在の幅をピクセル値で取得します。
jQuery v1.2以上では、ウィンドウとドキュメントの幅も取得できます。
設置イメージ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(){
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
width() 戻り値：jQuery
マッチした各要素にCSSで高さを設定します。
第1引数valには、CSSのwidthプロパティに設定する値を指定します。
単位を指定しない場合は、ピクセル値として解釈されます。
設置イメージwidth(val)の使用例サンプルを見る
<!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
innerHeight() 戻り値：整数
最初にマッチした要素の内部の高さ（borderは除く／paddingは含める）をピクセル値で取得します。 このメソッドは表示・非表示にされている要素の両方で動作します。
設置イメージinnerHeight()の使用例サンプルを見る
<!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
innerWidth() 戻り値：整数
最初にマッチした要素の内部の幅（borderは除く／paddingは含める）をピクセル値で取得します。 このメソッドは表示・非表示にされている要素の両方で動作します。
設置イメージinnerWidth()の使用例サンプルを見る
<!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
outerHeight([options]) 戻り値：整数
最初にマッチした要素の外部の高さ（デフォルトで設定されている、のborderとpaddingを含める）をピクセル値で取得します。 このメソッドは表示・非表示にされている要素の両方で動作します。
オプションの第1引数optionsにTRUEを指定すると、marginを含めた外部の高さを取得することができます。
設置イメージouterHeight()の使用例サンプルを見る
<!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
outerWidth([options]) 戻り値：整数
最初にマッチした要素の外部の幅（デフォルトで設定されている、borderとpaddingを含める）をピクセル値で取得します。 このメソッドは表示・非表示にされている要素の両方で動作します。
オプションの第1引数optionsにTRUEを指定すると、marginを含めた外部の幅を取得することができます。
設置イメージouterWidth()の使用例サンプルを見る
<!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
設置イメージouterWidth()の使用例サンプルを見る
<!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>