JavaScript staat stelt een website te reageren op de gebruiker gebeurtenissen , het veranderen van de inhoud van een pagina op basis van verschillende muis en toetsaanslagen acties . Menu's en knoppen dienen vaak als triggers voor die veranderingen , maar DIV kan even reageren . Een DIV is een HTML-tag die dient als container voor andere content , zoals tekst en foto's . Muis over een deel van de DIV kan een verandering teweegbrengen . Bewegen van de muis uit de DIV kan een ander teweegbrengen . Instructies
1 Plaats een helper functie tussen je hoofd tags die je script werk laat in alle browsers . De functie zal gebeurtenislisteners toe te voegen aan HTML -elementen op de pagina . Wanneer het heet , de helper functie neemt drie argumenten , of sets van instructie : . Het doel element , type evenement en functie functie addEvent
( obj , type, fn ) {
if ( obj.attachEvent ) { obj
[ ' e ' + soort + fn ] = fn ; obj
[ soort + fn ] = function ( ) { obj [ ' e ' + Type + fn ] ( window.event ) ; } obj.attachEvent
( ' op ' + type, obj [ soort + fn ] ) ;
} anders obj
. addEventListener (type , fn , false) ;
} kopen van 2 Maak een functie tussen de head tags die de gebeurtenis load , of het laden van pagina's gebruikt in het venster , om te bellen de functie " testMouse " . Dit zal twee gebeurtenislisteners aan uw DIV : window.onload
= testMouse ;
3 Maak functies die zal resulteren in de kleur van uw DIV wijzigen op de pagina op basis van de mouseover en mouseout evenementen . Begin met het maken " testMouse , " die de DIV zal krijgen door de ID van " testDiv . " Luister naar de mouseover of mouseout gebeurtenissen en noemen het " addColor " of " removeColor " functies , respectievelijk . Maak de " addColor " en " removeColor " functies die de achtergrondkleur veranderen functie testMouse
( ) { var divField
= document.getElementById ( " testDiv " ) ; .
addEvent ( divField , ' mouseover ' , addColor ) ; addEvent
( divField , ' mouseout ' , removeColor ) ; } functie addColor ( ) {
var removeColor ( ) { var divField = document.getElementById
( " testDiv " ) ; divField.style.backgroundColor =
" " ;
}
Plaats 4 uw DIV tags en voorbeeldtekst tussen de body-tags van je document : tekst
hier tekst hier tekst hier . < /p> < /div >
5 Place CSS- stijlen voor uw dIV tussen de head tags om het een vaste grootte te geven en geef het een blauwe achtergrond : | 