.width()

http://api.jquery.com/width/

要素の横幅を計算します。

width( ) 1.0追加
width( value ) 1.0追加
width( function(index, width) ) 1.4.1追加
デモ

width( ) 1.0追加

戻り値:Integer

要素の横幅を算出します。 .css('width')と.width()の違いは、後者である.width()はpxを含まない数値を返してくれます。(例:400) 一方、.css('width')はpx含む文字列で値を返します。(例：400px) 通常、計算を行う場合は、width()が使用されます。

width( value ) 1.0追加

戻り値:jQuery

要素のCSSのwidthに指定した値を設定します。

引数	説明
value	px単位で設定したい横幅を指定します。

width( function(index, width) ) 1.4.1追加

戻り値:jQuery

要素のCSSのwidthに指定した関数の戻り値を設定します。

引数	説明
function(index, width)	px単位で設定したい横幅を戻り値で返す関数を指定します。関数に渡される引数は下記の通りです。 index 要素の番号です。 width 変更前に設定されている要素の横幅です。

デモ

下記はPタグ、Document、iFrame内のWindowの横幅を取得するデモです。 iFrame内のWindowとDocumentの横幅の関係を確認してください。

<!DOCTYPE html>
<html>
<head>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold;  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="getp">Pタグ領域の横幅</button>
  <button id="getd">Document領域の横幅</button>
  <button id="getw">Window領域の横幅</button>

  <div>&nbsp;</div>
  <p>
    テスト用Pタグ領域です。
  </p>
<script>
function showWidth(ele, w) {
  $("div").text(ele + "の横幅は" + w + "pxです。");
}
$("#getp").click(function () {
  showWidth("Pタグ領域", $("p").width());
});
$("#getd").click(function () {
  showWidth("Document領域", $(document).width());
});
$("#getw").click(function () {
  showWidth("Window領域", $(window).width());
});

</script>

</body>
</html>

DIV領域の横幅を変更後、色を変更するデモです。

<!DOCTYPE html>
<html>
<head>
  <style>
div { width: 70px; height: 50px; float:left; margin: 5px;
        background: red; cursor: pointer; }
.mod { background: blue; cursor: default; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <div>d</div>
  <div>d</div>
  <div>d</div>
  <div>d</div>
  <div>d</div>

<script>
(function() {
  var modWidth = 50;
  $("div").one('click', function () {
    $(this).width(modWidth).addClass("mod");
  modWidth -= 8;
  });
})();
</script>

</body>
</html>