Prototypeフレームワークノート2(カスタムオブジェクトとクラス)
Prototype.jsには多くのカスタムオブジェクトとクラスが提供されており、これらのカスタムオブジェクトとクラスには多くの有用な方法と機能が含まれています.
(一)、Elementオブジェクト
CSSによってHTML要素の外観を変更したり、HTML要素にダイナミックな表示効果を提供する方法を直接提供したりするなど、HTML要素の操作を簡略化する一連の方法用語が提供されています.方法は次のとおりです.
(1)addClassName(element,className):element要素にclassNameスタイルを追加します.
(2)removeClassName(element,className):element要素のclassNameスタイルを削除します.次のようになります.
(3)empty(element):ある要素が空であるか、または空の文字列のみが含まれているかを判断します.もしそうであればtrueを返し、そうでなければfalseを返す.パラメータelementは、要素のid属性であってもよいし、要素自体であってもよい.
(4)getHeight(element):要素の高さを返します.
(5)getWidth(elemtn):要素の長さを返します.
(6)getStyle(element,cssProperty):HTML要素のインラインCSSの属性値を返します.
(7)hasClassName(element,className):HTML要素に指定したCSSスタイルが含まれているかどうかを判断します.
(8) hide(elem1[,elem2[,...]]): 複数のHTML要素を同時に非表示にしてstyleを設定.display='none'で非表示にするため、要素がページに占めるスペースが解放されます.入力された各elementは、要素のid属性であってもよいし、要素自体であってもよい.
(9)makePositioned(element):ある要素のインラインCSS属性style.positionはrelativeに設定されています.
(10)remove(element):指定したHTML要素をDocumentオブジェクトから削除します.
(11)removeClassName(element,className):指定したHTML要素の特定のCSSスタイルを削除します.
(12)scrollTo(element):windowをオブジェクトの位置にスクロールします.
(13)setStyle(element,cssProperty):HTML要素のインラインCSSスタイルを設定します.
(14) show(elem1[,elem2[,...]]): hideとは逆です.
(15)update(element,html):HTMLオブジェクトにinnerHTMLプロパティを設定します.
(16)undoPositioned(element):HTMLオブジェクトのstyle.positionが「」に設定.makePositionedメソッドとは逆です.
(17) toggle(elem1[,elem2[,...]]):入力された複数のHTML要素の全体的な表示、マスク、すなわち表示と非表示の切り替えを制御します.
(一)、Elementオブジェクト
CSSによってHTML要素の外観を変更したり、HTML要素にダイナミックな表示効果を提供する方法を直接提供したりするなど、HTML要素の操作を簡略化する一連の方法用語が提供されています.方法は次のとおりです.
(1)addClassName(element,className):element要素にclassNameスタイルを追加します.
(2)removeClassName(element,className):element要素のclassNameスタイルを削除します.次のようになります.
<script type="text/javascript">
function chg(){
Element.addClassName("up","solid");
}
function rem(){
Element.removeClassName("up","solid");
}
</script>
<style>
.solid{
width:160px;
text-align:center;
border-right:#002200 2px solid;
border-top: #b9ffb9 2px solid;
border-left:#b9ffb9 2px solid;
color:#ffff00;
BACKGROUND-COLOR:#008000;
}
</style>
</head>
<body>
<input type="button" onClick="chg()" value=" "/>
<input type="button" onClick="rem()" value=" "/>
<div id="up"> </div>
</body>
</html>
(3)empty(element):ある要素が空であるか、または空の文字列のみが含まれているかを判断します.もしそうであればtrueを返し、そうでなければfalseを返す.パラメータelementは、要素のid属性であってもよいし、要素自体であってもよい.
(4)getHeight(element):要素の高さを返します.
(5)getWidth(elemtn):要素の長さを返します.
(6)getStyle(element,cssProperty):HTML要素のインラインCSSの属性値を返します.
(7)hasClassName(element,className):HTML要素に指定したCSSスタイルが含まれているかどうかを判断します.
(8) hide(elem1[,elem2[,...]]): 複数のHTML要素を同時に非表示にしてstyleを設定.display='none'で非表示にするため、要素がページに占めるスペースが解放されます.入力された各elementは、要素のid属性であってもよいし、要素自体であってもよい.
(9)makePositioned(element):ある要素のインラインCSS属性style.positionはrelativeに設定されています.
(10)remove(element):指定したHTML要素をDocumentオブジェクトから削除します.
(11)removeClassName(element,className):指定したHTML要素の特定のCSSスタイルを削除します.
(12)scrollTo(element):windowをオブジェクトの位置にスクロールします.
(13)setStyle(element,cssProperty):HTML要素のインラインCSSスタイルを設定します.
(14) show(elem1[,elem2[,...]]): hideとは逆です.
(15)update(element,html):HTMLオブジェクトにinnerHTMLプロパティを設定します.
(16)undoPositioned(element):HTMLオブジェクトのstyle.positionが「」に設定.makePositionedメソッドとは逆です.
(17) toggle(elem1[,elem2[,...]]):入力された複数のHTML要素の全体的な表示、マスク、すなわち表示と非表示の切り替えを制御します.