Höhe, Farbe und Rahmen ändern
HTML-Quellcode
- <p>
- <input type=submit id="heightEffect" value="Höhe">
- <input type=submit id="colorEffect" value="Farbe">
- <input type=submit id="borderEffect" value="Rahmen">
- <input type=submit id="resetEffect" value="Zurücksetzen">
- </p>
- <div class="demoElementHeight">
- <div id="myOtherElement" class="demoElement">
- </div>
- </div>
Javascript-Quellcode
- window.addEvent('domready', function(){
- var otherEl = $('myOtherElement');
- $('heightEffect').addEvent('click', function(){
- otherEl.tween('height', 50);
- return false;
- });
- var myEffect = new Fx.Tween(otherEl);
- $('colorEffect').addEvent('click', function(e){
- e.stop();
- myEffect.start('background-color', '#E6EFC2');
- });
- $('borderEffect').addEvent('click', function(e){
- e.stop();
- otherEl.tween('border', '10px dashed #C6D880');
- });
- $('resetEffect').addEvent('click', function(e){
- e.stop();
- otherEl.erase('style');
- });
- });
CSS-Quellcode
- div.demoElement {
- width: 80px;
- height: 80px;
- border: 1px solid black;
- background-color: #f9f9f9;
- font-size: 12px;
- color: #000000;
- padding: 10px;
- }
- div.demoElementHeight {
- height: 120px;
- }
Schlagwörter:
Mootools Tutorial, Javascript, Javascript Online Workshop, MooTools, Höhe, Farbe und Rahmen ändern.
Webseite zu Favoriten hinzufügen:
