jQuery outerWidth() メソッド

jQuery HTML/CSS 方法

outerWidth()メソッドは、選択された要素の外部幅（padding、borderを含む）を取得または設定します。

outerWidth(true）メソッドは、選択された要素の外部幅（padding、border、marginを含む）を取得または設定します。

externalWidth()メソッドを使用するとき、取得幅を設定すると、最初の選択された要素の幅。

externalWidth()メソッドを使用するとき、設定幅を設定すると、すべての選択された要素の幅。

以下の図のように、externalWidth()メソッドにはフィルルとボーダーが含まれています：

マージンを含む場合は、outerWidth（true）を使用してください。

语法：

外部幅を取得します：

$(selector).outerWidth()

マージンを含む外部幅を取得します：

$(selector).outerWidth(true)

外部幅を設定します：

$(selector).outerWidth(value)

例

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

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

DIV要素の外部幅（マージンを含む）を取得します：

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

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

$("button").click(function(){
　　$("p").outerWidth(100);
});

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

$("#btn1").click(function(){
　　$("p").outerWidth(100);
});
$("#btn2").click(function(){
　　$("p").outerWidth("10em");
});
$("#btn3").click(function(){
　　$("p").outerWidth("100vw");
});

width()、height()、innerHeight()、innerWidth()、outerWidth()、outerHeight()の間の差を表示：

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

パラメータの値

jQuery HTML/CSS 方法