jQuery-ディメンション
jQueryを使用すると、要素とブラウザーウィンドウのサイズを簡単に操作できます。
jQueryディメンションメソッド
jQueryには、ディメンションを操作するための重要なメソッドがいくつかあります。
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
jQueryディメンション
jQueryのwidth()およびheight()メソッド
このwidth()メソッドは、要素の幅を設定または返します (パディング、ボーダー、マージンを除く)。
このheight()メソッドは、要素の高さを設定または返します(パディング、ボーダー、マージンを除く)。
次の例は、指定された<div>要素の幅と高さを返します。
例
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQueryのinnerWidth()およびinnerHeight() メソッド
このinnerWidth()メソッドは要素の幅(パディングを含む)を返します。
このinnerHeight()メソッドは要素の高さを返します(パディングを含む)。
次の例は、指定された<div>要素の内側の幅/高さを返します。
例
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQueryのouterWidth()およびouterHeight() メソッド
このouterWidth()メソッドは要素の幅(パディングとボーダーを含む)を返します。
このouterHeight()メソッドは要素の高さを返します(パディングとボーダーを含む)。
次の例は、指定された<div>要素の外側の幅/高さを返します。
例
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
このouterWidth(true)メソッドは、要素の幅(パディング、ボーダー、マージンを含む)を返します。
このouterHeight(true)メソッドは、要素の高さを返します(パディング、ボーダー、マージンを含む)。
例
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQueryのその他のwidth()とheight()
次の例では、ドキュメント(HTMLドキュメント)とウィンドウ (ブラウザービューポート)の幅と高さを返します。
例
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
次の例では、指定された<div>要素の幅と高さを設定します。
jQuery CSSリファレンス
すべてのjQuery CSSメソッドの完全な概要については、jQuery HTML/CSSリファレンスを参照してください。