jQuery width() メソッド

jQueryのHTML/CSSメソッド

width()メソッドは、選択された要素の幅を取得または設定します。

width()メソッドを使用する場合、取得幅を設定する場合、それが返されます：最初の選択された要素の幅です。

width()メソッドを使用する場合、設定幅を設定する場合、それが設定されます：すべての選択された要素の幅です。

以下の図のように、width()メソッドは、フィルリング、ボーダーやマージンを含まないことを示します：

幅の値も相対的でできます。値に先頭の符号が提供されている場合、+=または-=文字列の場合、現在の値から指定された数字を加算または減算して目標幅を計算します（例：width（"-= 250））。

構文：

幅を取得します：

$.selector().width()

幅を設定します：

$.selector().width(value)

関数を使用して幅を設定します：

$.selector().width(function(index, currentWidth))

例

DIV要素の幅を取得します：

$("div").click(function(){
　　$(this).width();
});

すべての段落の幅を設定します：

$("button").click(function(){
　　$("p").width(250);
});

すべての段落の幅を異なる単位で設定します：

$("#btn1").click(function(){
　　$("p").width(250);
});
$("#btn2").click(function(){
　　$("p").width("7em");
});
$("#btn3").click(function(){
　　$("p").width("100vw");
});

ボタンをクリックしたとき、すべての段落の幅を小さくします（関数を使用して）：

$("button").click(function(){
　　$("p").width(function(i, val){
　　　　　　　　return val　-　50;
　　});
});

width()メソッドは、ウィンドウとドキュメントの幅を見つけることもできます：

$(window).width();//　ブラウザのビューポートの幅を返します
$(document).width();　　//HTMLドキュメントの幅を返します

width()、height()、innerHeight()、innerWidth()、outerWidth()とouterHeight()の差を表示します：

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

引数の値

jQueryのHTML/CSSメソッド