Video: Exploring JavaScript and the Web Audio API by Sam Green and Hugh Zabriskie 2024
En av byggesteinene for å skape spesialeffekter for en hvilken som helst side, er evnen til å lage dynamiske HTML-endringer på siden. For eksempel vil du kanskje lage en spesiell effekt for det valgte elementet som vist i følgende eksempel.
funksjon ChangeStyles (event) {// Hent en referanse til elementet. var ThisElement = dokument. getElementById (event. currentTarget. id); // Sjekk hendelsestypen. hvis (event type == "mouseover") {// Endre målelementets CSS-klasse. ThisElement. setAttribute ("class", "Selected");} else {ThisElement. setAttribute ("class", "Normal");}}
Denne koden aksepterer en aktivitet som input. Koden får en referanse til elementet som er gitt av hendelsesobjektet. Det sjekker deretter hendelsen. skriv inn eiendom for å finne ut hvilken type hendelse som har skjedd (enten mouseover eller mouseout). Typen av hendelse bestemmer hva slags formatering elementet bruker.
Selvfølgelig vil det være nyttig å gi en form for automatisering for å tilordne en hendelseshandler for onmouseover og onmouseout hendelser. Følgende kode utfører denne oppgaven for deg:
// Få en liste over elementer som bruker-taggen. var ElementList = dokument. getElementsByTagName ("p"); // Behandle hver av disse kodene igjen. for (var i = 0; i
Dette er en annen variant av interaksjon med en gruppe av elementer som bruker samme tag -
-taggen i dette tilfellet. Koden får en rekke av disse elementene ved å ringe getElementsByTagName (). Den tildeler deretter ChangeStyles () -funksjonen til egenskapene på og over på hver enkelt element. Resultatet er at hver
-tag på siden reagerer når du holder musen over den.