« prototype.js で Ajax | トップページ | FireBugのインストールと簡単な使い方 »

2006年6月29日 (木)

prototype.js その他の便利機能

prototype.js にはAjax以外にも便利な機能があります。
その中からDOMの要素に関する機能をいくつか紹介しようと思います。

$() 関数
この関数は、DHTMLで頻繁に出てくる document.getElementById() のショートカットとして使用できます。
使用例:
var element = $("ElementId");
element.innerHTML = "....";

また、この関数には複数のIDを指定することも出来ます。
その場合は、指定した要素が配列で返ってきます。
使用例:
var elements = $("ID1", "ID2", "ID3");
for(var i=0;i<elements.length;i++){
    elements[i].style.display = "none";
}

Elementクラス
このクラスは、DOMの要素を操作する際に便利です。
以下のようなメソッドが用意されています。
getDimensions メソッド
要素のサイズを取得することが出来ます。
引数には要素のIDまたはインスタンスで、 戻り値は、widthとheightというプロパティを持つオブジェクトです。
使用例:
var d = Element.getDimensions("ElementId");
alert("width=" + d.width + ",height=" + d.height);

getStyle メソッド
要素のスタイルを取得できます。
引数は要素のIDまたはインスタンスと取得したいスタイル名で、戻り値はCSSスタイルの値です。
使用例:
alert(Element.getStyle("ElementId", "border"));

setStyle メソッド
要素のスタイルを設定できます。
引数は要素のIDまたはインスタンスと設定したいスタイル名と値のペアです。
使用例:
var styles = {"color":"red", "background-color":"blue"};
Element.setStyle("ElementId", styles);

hide メソッド
CSSスタイルのdisplayをnoneに設定して、要素を非表示にします。
引数は要素のIDまたはインスタンスです。複数指定することが出来ます。
使用例:
Element.hide("ElementId1", "ElementId2");

show メソッド
hideメソッドとは逆に、要素を表示します。
引数は要素のIDまたはインスタンスです。複数指定することが出来ます。
使用例:
Element.show("ElementId1", "ElementId2");

toggle メソッド
要素の表示状態を反転します。表示状態であれば非表示に、非表示状態であれば表示状態になります。
引数は要素のIDまたはインスタンスです。複数指定することが出来ます。
使用例:
Element.toggle("ElementId1", "ElementId2");

remove メソッド
要素を削除します。hideメソッドと見た目は同じような動きですが、元に戻すことは出来ません。
引数は要素のIDまたはインスタンスです。
使用例:
Element.remove("ElementId");

Elementクラスには他にもメソッドがありますので、機会があればご紹介したいと思います。
prorotype.jsには、他にもまだまだ便利な機能がありますので、明日も引き続きご紹介したいと思います。

|

« prototype.js で Ajax | トップページ | FireBugのインストールと簡単な使い方 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10719288

この記事へのトラックバック一覧です: prototype.js その他の便利機能:

« prototype.js で Ajax | トップページ | FireBugのインストールと簡単な使い方 »