Search

jQuery APIリファレンススタイル操作：高さと幅

  1. height()〔要素の高さを取得〕
  2. height(val)〔要素の高さを設定〕
  3. width()〔要素の幅を取得〕
  4. width(val)〔要素の幅を設定〕
  5. innerHeight()〔最初にマッチした要素の内部の高さを取得 〕
  6. innerWidth()〔最初にマッチした要素の内部の幅を取得 〕
  7. outerHeight([options])〔最初にマッチした要素の外部の高さを取得 〕
  8. 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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women