Native: Element

$関数を使って、DOM要素がすべてのメソッドを利用できるようにするカスタムネイティブです。

注意点:

これらのメソッドはbody要素のマージンとボーダーを考慮しません。 bodyにマージンとボーダーが必要ならば、ラッパーdivを使用し、bodyのマージンとボーダーを0にするよう心がけてください。

クレジット:

  • 要素の位置指定はLGPLライセンスであるqooxdooコードとsmart browser fixesに因っています。
  • ビューポート(見えている範囲)の領域管理については、BSDライセンスのYUIに因っています。

Elementメソッド: scrollTo

要素を指定した座標までスクロールします(要素がoverflowを持っている場合に限ります)。 このメソッドはwindowオブジェクトに対しても使えます。

構文:

myElement.scrollTo(x, y);

Arguments:

  1. x - (数) x座標。
  2. y - (数) y座標。

例:

$('myElement').scrollTo(0, 100);

参考情報:

Elementメソッド: getSize

ボーダーとパディングを考慮して、要素の高さと幅を返します。 このメソッドはwindowオブジェクトにも適用できます。

構文:

myElement.getSize();

戻り値:

  • (オブジェクト) ターゲット要素の幅(キー名:x)と高さ(キー名:y)を持つオブジェクト。

例:

var size = myElement.getSize();
alert("The element is "+size.x+" pixels wide and "+size.y+"pixels high.");

Elementメソッド: getScrollSize

ターゲット要素のサイズを表すオブジェクトを返します。スクロールされる領域も含まれます。 このメソッドはwindowオブジェクトにも使えます。

構文:

myElement.getScrollSize();

戻り値:

  • (オブジェクト) ターゲット要素のx-y空間を表すオブジェクト。

例:

var scroll = $('myElement').getScrollSize();

alert('My element can scroll to ' + scroll.y + 'px'); //アラート 'My element can scroll down to 820px'

参考情報:

Elementメソッド: getScroll

ターゲット要素までどれだけ離れているかを示す値からなるオブジェクトを返します。 このメソッドはwindowオブジェクトにも使えます。

構文:

myElement.getScroll();

戻り値:

  • (オブジェクト) ターゲット要素までどれだけスクロールすればよいかをx-y座標値で表したオブジェクト。

例:

var scroll = $('myElement').getScroll();

alert('My element is scrolled down ' + scroll.y + 'px'); //アラート'My element is scrolled down to 620px'

Elementメソッド: getPosition

要素のオフセットを返します。

構文:

myElement.getPosition(relative);

引数:

relative - (要素, 初期値＝document) 設定されていたら、この要素からの相対的な位置になります。

戻り値:

  • (オブジェクト) 要素の位置をx-y座標で表したオブジェクト。

例:

$('element').getPosition(); //戻り値{x: 100, y: 500};

参考情報:

Elementメソッド: getCoordinates

要素のwidth, height, left, top, bottomの座標値を返します。

構文:

myElement.getCoordinates(relative);

引数:

relative - (要素, オプション:初期値=document) 設定されていたら、この要素からの相対的な位置になります。

戻り値:

  • (オブジェクト) 次の値からなるオブジェクト:top, left, width, height, right, bottom

例:

var myValues = $('myElement').getCoordinates();

戻り値:

{
    top: 50,
    left: 100,
    width: 200,
    height: 300,
    right: 300,
    bottom: 350

}

参考情報:

Element:getPosition

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳（ちょっと改変）しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る