（jQueryの学習）CSS：幅を操作する／widthメソッド／要素の幅を取得する（その１）

今回からはCSSの幅を操作する方法を学びます。
以下、3つのカテゴリに分けて見ていきます。

基本的には「高さ」と同じ内容になっています。
inner***やouter***の概念がわかっていれば、特に問題は無いと思います。

1. 要素の幅を取得／設定する
2. borderの内側の幅(borderは除き、paddingは含む)を取得する
3. borderの外側の幅(border、paddingを含む)を取得する

ここではjQueryにてCSSで定義された要素の幅の操作方法を整理します。

要素の幅を操作するには、
用途に応じて「widthメソッド」、「innerWidthメソッド」、「outerWidthメソッド」を利用する必要があります。
メソッドの種類は以下の通り。

■要素の幅を取得する
　・返却値（数値）＝要素．width（プロパティ名）　※ver1.0～
■要素の幅を設定する
　・返却値（jQueryオブジェクト）＝要素．width（値）　※ver1.0～
　・返却値（jQueryオブジェクト）＝要素．width（function）　※ver1.4.1～
■borderの内側の幅を取得する
　・返却値（数値）＝要素．innerWidth（）　※ver1.2.6～
■borderの外側の幅を取得する
　・返却値（数値）＝要素．outerWidth（）　※ver1.2.6～

これらのメソッドを使うことで、要素のいろいろな幅が取得ができるようになります。

それでは本日は「1.要素の幅を取得／設定する」を学びます。

まずは「単一要素」の幅を取得します。

1.要素の幅を取得／設定する

1-1.widthメソッド【返却値(数値) = 要素.width( )】で1つの要素の幅を取得する

要素の幅を取得するためにはwidthメソッドを利用します。
返却値は「数値」のため、計算等の二次利用をするにはちょうど良い。

以下のサンプルを動かしてみると、
CSSで定義した通りの値（例：テストエリア１なら「40」）が返却されることがわかります。

ちなみに「幅(width)」とは、
枠外余白(margin)、境界線(border)、枠内余白(padding)のさらに内側の領域の幅を表します。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の幅が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(数値) = 要素.width()
    //   サンプル：「テストエリア１」の幅を取得する
    alert("[" + $(".box-css-test-area-1").width() + "]");
  });
});

実装例

指定した要素に設定されている幅を取得します。

要素: テストエリア１テストエリア２

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

次回は複数の要素の幅を取得する方法を学びます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share