Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

jQuery-ディメンション

jQueryを使用すると、要素とブラウザーウィンドウのサイズを簡単に操作できます。

jQueryディメンションメソッド

jQueryには、ディメンションを操作するための重要なメソッドがいくつかあります。

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

jQueryディメンション

jQuery Dimensions

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>要素の幅と高さを設定します。

例

$("button").click(function(){   $("#div1").width(500).height(500); });

jQuery CSSリファレンス

すべてのjQuery CSSメソッドの完全な概要については、jQuery HTML/CSSリファレンスを参照してください。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル