要素を操作する

Sabel.ElementはDOM要素を使用する上で便利な関数を要素に追加します。

要素の位置を取得する

要素の位置を取得するには、getCumulativeTop / getCumulativeLeftメソッドを使用します。
また、要素の上下左右の位置を全て取得するには、getRegionメソッドを使用します。

alert(Sabel.get("sample1").getCumulativeTop());
alert(Sabel.get("sample1").getCumulativeLeft());

alert(Sabel.get("sample1").getRegion());

要素のサイズを取得する

要素の縦と横のサイズを取得するには、getDimensionsメソッドを使用します。
この関数は対象の要素がdisplay: noneやvisibility: hidden等で隠れている場合も取得出来ます。

var dimensions = Sabel.get("sample2").getDimensions();
alert(dimensions.height); // 200
alert(dimensions.width); // 200

また、縦か横のどちらかだけ取得したい場合は、getHeight / getWidthメソッドを使用して下さい。

alert(Sabel.get("sample2").getHeight());
alert(Sabel.get("sample2").getWidth());

要素の兄弟・子要素を取得する

要素の兄弟要素や子要素を取得したい場合には、nextSibling / firstChildなどのプロパティが使用出来ますが、要素間に空白行が含まれていたりするとテキスト要素が返ってきてしまいます。
SabelのgetNextSibling / getFirstChildなどのメソッドを使用すれば、要素間に空白行が含まれていても無視して兄弟・子要素を取得することが出来ます。
サンプルとして以下の様なHTMLで試してみましょう。

<div id="sample3">
  <div id="parent">
    <div id="child_a"></div>
    <div id="child_b"></div>
    <div id="child_c"></div>
  </div>
</div>

alert(Sabel.get("parent").getFirstChild().id); // child_a
alert(Sabel.get("parent").getLastChild().id); // child_c
alert(Sabel.get("child_b").getNextSibling().id); // child_c
alert(Sabel.get("child_b").getPreviousSibling().id); // child_a
alert(Sabel.get("child_c").getPreviousSiblings()); // child_b, child_a

要素を表示・非表示にする

要素を非表示にしたり、非表示にした要素を再度表示するには、show / hideメソッドが使用します。

var element = Sabel.get("sample4").hide(); // 要素の非表示

var element = Sabel.get("sample4").show(); // 要素の表示

要素のクラスを操作する

要素のクラスを操作するには、hasClass / addClass / removeClassメソッドを使用します。

  var element = new Sabel.Element("div");
  alert(element.hasClass("hoge")); // false
  alert(element.className); // ""

  element.addClass("fuga");
  alert(element.className); // fuga

  element.addClass("hogefuga");
  alert(element.className); // fuga hogefuga

  element.replaceClass("hogefuga", "hoge");
  alert(element.className); // fuga hoge

<< 戻る