Blog om foto, web og brugervenlighed

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.