使用Prototype的一点心得体会（二）

使用Element对象 （ API:  http://www.prototypejs.org/api/element ）

1.addClassName方法

< html >
< head >
< script  src ="prototype-1.6.0.2.js"  type ="text/javascript" ></ script >
< script > ...
function chg()
...{    
    Element.addClassName("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;
        BORDER-BOTTOM: #002200 2px solid;
        BACKGROUND-COLOR: #008000;
    }

</ style >
</ head >
< body >

< input  type ="button"  onClick ='chg()'  value ="Test" />
< div  id =up  > 立体效果 </ div >
</ body >
</ html >

注意：Element.setStyle方法也可实现类似效果

2. toggle方法

< html >
< head >
< script  src ="prototype-1.6.0.2.js"  type ="text/javascript" ></ script >
< script > ...
function chg()
...{
    Element.toggle("div1","div2","div3");
}
</ script >
</ head >
< body >
< input  type ="button"  onClick ='chg()'  value ="Test" />
< div  id ="div1" >
1111111
</ div >
< div  id ="div2" >
2222222
</ div >
< div  id ="div3" >
3333333
</ div >
</ body >
</ html >

3. makePositioned和undoPositioned方法（style.position设置为relative）

< html >
< head >
< script  src ="prototype-1.6.0.2.js"  type ="text/javascript" ></ script >
< script > ...
function set()
...{
    Element.makePositioned("div1");
}
function unset()
...{
    Element.undoPositioned("div1");
}
</ script >
</ head >
< body >

< input  type ="button"  onClick ='set()'  value ="do"   />
< input  type ="button"  onClick ='unset()'  value ="cancel"   />
< div  id ="div1"  style ="left:80px;top:20px;" >
aaaaaaaaaaaaaa
</ div >
</ body >
</ html >