Video: Exploring JavaScript and the Web Audio API by Sam Green and Hugh Zabriskie 2025
En av byggstenarna för att skapa specialeffekter för en sida är möjligheten att göra dynamiska HTML-ändringar till sidan. Du kan till exempel skapa en särskild effekt för det valda elementet som visas i följande exempel.
funktionen ChangeStyles (händelse) {// Hämta en referens till elementet. var ThisElement = dokument. getElementById (händelse. currentTarget. id); // Kontrollera händelsetypen. om (händelse. typ == "mouseover") {// Ändra målelementets CSS-klass. ThisElement. setAttribute ("class", "Selected");} else {ThisElement. setAttribute ("class", "Normal");}}
Den här koden accepterar en händelse som input. Koden får en hänvisning till det element som tillhandahålls av händelseobjektet. Det kontrollerar då händelsen. skriv egenskapen för att bestämma vilken typ av händelse som har hänt (antingen mouseover eller mouseout). Typ av händelse bestämmer vilken typ av formatering elementet använder.
Det skulle givetvis vara praktiskt att tillhandahålla någon form av automatisering för att tilldela en händelsehanterare för onmouseover och onmouseout händelser. Följande kod utför denna uppgift för dig:
// Hämta en lista över element som använder taggen. var ElementList = dokument. getElementsByTagName ("p"); // Behandla var och en av dessa taggar i sin tur. för (var i = 0; i
Det här är en annan variant av att interagera med en grupp av element som använder samma tagg - taggen
i det här fallet. Koden erhåller en uppsättning av dessa element genom att ringa getElementsByTagName (). Det tilldelar sedan funktionen ChangeStyles () till egenskaperna för att överföra och påmouseout varje element. Resultatet är att varje
-taggen på sidan reagerar när du håller muspekaren över den.
