jQuery位置、CSSおよび寸法

位置
offset([coordinates])
現在のビューポートで一致する要素の相対的なオフセットを取得します.返されるオブジェクトには、topとleftの2つの整数属性があります.ピクセル単位です.このメソッドは、表示される要素にのみ有効です.

     :         

HTMLコード

<p>Hellop><p>2nd Paragraphp>

jQueryコード

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

結果

<p>Hellop><p>left: 0, top: 35p>

  coordinates   :         

HTMLコード

<p>Hellop><p>2nd Paragraphp>

jQueryコード

$("p:last").offset({ top: 10, left: 30 });

position()
親要素に対する一致する要素のオフセットを取得します.返されるオブジェクトには、topとleftの2つの整数属性が含まれます.結果を正確に計算するには、補白、枠線、塗りつぶしのアトリビュートにピクセル単位を使用します.このメソッドは、表示される要素にのみ有効です.

     :              

HTMLコード

<p>Hellop><p>2nd Paragraphp>

jQueryコード

var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );

結果

<p>Hellop><p>left: 15, top: 15p>

scrollTop([val])
スクロールバーの上部に対する一致する要素のオフセットを取得します.この方法は、要素の表示と非表示の両方に有効です.

     :                

HTMLコード

<p>Hellop><p>2nd Paragraphp>

jQueryコード

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop());

結果

<p>Hellop><p>scrollTop: 0p>

  val   :             

jQueryコード

$("div.demo").scrollTop(300);

scrollLeft([val])
スクロールバーの左側に対する一致する要素のオフセットを取得します.この方法は、要素の表示と非表示の両方に有効です.

     :                

HTMLコード

<p>Hellop><p>2nd Paragraphp>

jQueryコード

var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );

結果

<p>Hellop><p>scrollLeft: 0p>

  val   :             

jQueryコード

$("div.demo").scrollLeft(300);

CSS
css(name|pro|[,val|fn])
一致する要素のスタイルプロパティにアクセスします.

  name   :         color      

jQueryコード

$("p").css("color");

  properties   :                      

jQueryコード

$("p").css({ "color": "#ff0011", "background": "blue" });

  name,value   :            

jQueryコード

$("p").css("color","red");

  name,       :     div   

jQueryコード

 $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

サイズ
height([val|fn])
マッチング要素の現在計算されている高さ値(px)を取得します.jQuery 1.2以降でwindowとdocumentの高さを取得できます

     :        

jQueryコード

$("p").height();

  val   :           20:

jQueryコード

$("p").height(20);

  function(index, height)   :   10         p      

jQueryコード

  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

width([val|fn])
最初の一致要素の現在計算されている幅値(px)を取得します.jQuery 1.2以降でwindowとdocumentの幅を取得できます

     :        

jQueryコード

$("p").width();

  val   :           20:

jQueryコード

$("p").width(20);

  function(index, height)   :   10         p      

jQueryコード

$("button").click(function(){
    $("p").width(function(n,c){
        return c+10;
    });
  });

innerHeight()
最初の一致する要素の内部領域の高さ(ホワイトニングを含む、枠線を含まない)を取得します.この方法は、表示および非表示の要素に有効です.

  :             

HTMLコード

<p>Hellop><p>2nd Paragraphp>

jQueryコード

var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );

結果

<p>Hellop><p>innerHeight: 16p>

innerWidth()
最初の一致する要素の内部領域の幅(ホワイトニングを含む、枠線を含まない)を取得します.この方法は、表示および非表示の要素に有効です.

  :             

HTMLコード

<p>Hellop><p>2nd Paragraphp>

jQueryコード

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );

結果

<p>Hellop><p>innerWidth: 40p>

outerHeight([options])
最初の一致する要素の外部高さを取得します(デフォルトでは、ホワイトニングと枠線が含まれます).この方法は、要素の表示と非表示の両方に有効です.

  :           

HTMLコード

<p>Hellop><p>2nd Paragraphp>

jQueryコード

var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

結果

<p>Hellop><p>outerHeight: 35 , outerHeight(true):55p>

outerWidth([options])
最初の一致する要素の外部幅を取得します(デフォルトでは、ホワイトニングと枠線が含まれます).この方法は、表示および非表示の要素に有効です.

  :           

HTMLコード

<p>Hellop><p>2nd Paragraphp>

jQueryコード

var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );

結果

<p>Hellop><p>outerWidth: 65 , outerWidth(true):85p>

jQuery APIドキュメントから抜粋