10.3 Attribut, stil och händelselyssnare
I detta exempel tar vi upp det som är kopplat till ett element. Detta är attribut, stil och händelselyssnare. Allt detta är också olika objekt, som man refererar till via elementet.
16 min.
Sammanfattning
Här följer en kort beskrivning av de olika delarna.
Attribut
Attribut som ingår i elementets definition i HTML, följer reglerna för identifierare. Dessa kan man alltid refera till med punktnotation, t.ex. imgElem.src, om imgElem är en variabel med en referens till ett img-element.
Attribut som man inför själv, ska alltid ha prefixet data-, för att undvika eventuella namnkonflikter med de attribut som ingår i standarden (både nuvarande och framtida attribut). Om man t.ex. i ett img-element inför ett attribut för att spara information om upphovsman och vill kalla det credit, ska man alltså använda namnet data-credit. Ett sådant attribut kan man inte referera till med punktnotation, eftersom bindestrecket då tolkas som ett minustecken. Istället får man använda getAttribute() för att avläsa attributet och setAttribute() för att ge det ett nytt värde, t.ex.
imgElem.getAttribute("data-credit");
setAttribute("data-credit", "John Doe");
Dessa funktioner kan naturligtvis även användas för standardattributen, om man så vill.
Stil
Ett element kan ha en stil som skapas av en CSS-mall, som kopplas till HTML-dokumentet. Denna stil är dock inte kopplad till elementet, så att den kan avläsas. Men, om man lägger till stil genom att referera till elements style-egenskap, kopplas det direkt till elementet. Den stilen kan man sedan också avläsa, t.ex.let c = elem.style.backgroundColor;
Om man först tilldelar en stil till ett element och sedan tar bort den, kan man lägga in en tom textsträng. Stilen återgår då till den stil som bestäms av CSS-mallen för webbsidan. T.ex.elem.style.backgroundColor = "";
Händelselyssnare
Händelselyssnare kan läggas till på olika sätt, men som det har beskrivits i tidigare exempel bör man använda funktionen addEventListener(), se exempel i kapitel 3. Vill man ta bort en händelselyssnare, använder man removeEventListener().
Egna övningar
Övningar kommer i det sista exemplet, ex10.5.