jQueryを使って、要素と、ブラウザウィンドウのサイズで動作するように簡単です。
jQueryの寸法方法
jQueryのは、寸法を操作するためのいくつかの重要なメソッドがあります。
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQueryの寸法
jQueryのwidth()とheight()メソッド
width()メソッドセットまたは要素(除外の幅を返しますpadding, borderやmargin )。
height()メソッドは、要素(除外のの高さを設定または返しますpadding, borderやmargin )。
次の例では、指定の幅と高さを返す<div>要素を:
例
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
»それを自分で試してみてください jQueryのinnerWidth()およびinnerHeight()メソッド
innerWidth()メソッドは、要素の幅を(含ま返しpadding )。
innerHeight()メソッドは、要素の高さを(含ま返しpadding )。
次の例では、指定の内側の幅/高さを返す<div>要素を:
例
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
»それを自分で試してみてください jQueryのouterWidth()とouterHeight()メソッド
outerWidth()メソッドは、要素の幅を返します(含みpaddingとborder )。
outerHeight()メソッドは、要素の高さを返します(含みpaddingとborder )。
次の例では、指定の外側の幅/高さを返す<div>要素を:
例
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
»それを自分で試してみてください outerWidth(true)メソッドは、要素の幅を(含ま返しpadding, border 、およびmargin )。
outerHeight(true)メソッドは、要素の高さを(含ま返しpadding, border 、およびmargin )。
例
$("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リファレンス 。