Niels Gamborgs online notesbog

setAttribute og Internet Explorer

januar 8th, 2011. Kategori: Programmering

Hvis du bruger JavaScript metoden setAttribute til at manipulere DOM’en, skulle det være muligt at tilføje alle attributter til ethvert element i DOM’en. Dette er dog ikke tilfældet med Internet Explorer 7 og ældre IE browsere, hvor du hverken kan bruge style attributten eller class attributten.

Den gamle IE begrundelse for ikke at kunne tilføje class attributten til DOM elementer gennem setAttribute i IE 6 og IE7, var at class er et reserveret ord i JavaScript.

Tilføje class attribute i Internet Explorer

Hvis man vil tilføje en class attribute i  IE6 0g IE7  kan man i stedet bruge:

element.setAttribute(‘className’,’minklasse’);

Denne løsning giver dog ekstra arbejde, da du så skal til at detektere, hvilken browsere, der besøger dit website, da ovenstående ikke giver nogen mening i hverken Firefox eller IE8. Der vil du få en attribut ved navn ‘className’ og værdien ‘minklasse’.

I stedet kan du bruge:

element.className = ‘minKlasse’;

Den hæfter class atributten på elementet, og samtidig med at den navngiver den. Og det virker cross browser.

Style attribute i Internet Explorer

Jeg kender ikke begrundelsen for, hvorfor man ikke kan bruge style attributten. Men hvis du har brug for at tilføje en inline style med native JavaScript, kan du i stedet bruge .style syntaksen:

element.style.cssText = styleText

eller mere konkret:

element.style.backgroundColor = “#333333”;

Dnne metode vorker også på tværs af alle browsere. Du kan se en diskussion af emnet her:

http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.html

Add class og add style i jQuery

Hvis man bruger et JavaScript library vil dette selvfølgelig håndtere browser forskelligheder for dig. I jQuery bruges .addClass(“min klasse”) for at tilføje class’es og css metoden .css( “display”, “none “) for at tilføje styles.

Hvorfor så bøvle med det selv, når f.eks. jQuery fikser det så let? Hvis man kun skal bruge en enkelt eller 2 metoder fra jQuery kan man spare rigtig mange kilobyte og ikke mindst et ekstra http-request ved at gøre tingene selv. Og så er det da også meget sjovere.

  1. One Response to “setAttribute og Internet Explorer”

  2. By Mads on okt 2, 2011

    Lækker blog du har, gode ting du dækker. Har fulgt den meget.

    Er selv i gang med at starte en blog op. Kunne være fedt du lige gad og tjekke den ud 🙂

    Hilsen Mads

Skriv en kommentar