naden.de Bookmarken

CSS-Reset mit Javascript und ohne eval()

30. März 2009 | In: Javascript

Für einen konkreten Fall habe ich meine Funktionen zum CSS-Reset via Javascript etwas umgebaut. Ich brauchte eine Lösung, die auf den Aufruf der Funktion eval() verzichtet.

Hier die neue Implementierung von AddStyles ohne eval():

function AddStyles( element, styles ) {
  for( var k in styles ) {
    element.style[ k ] = styles[ k ];
  }
}

Die Werte werden nun als anonymes Javascript-Objekt übergeben, was auch sehr viel übersichtlicher ist:

var obj = document.getElementById( 'myelement' );
AddStyles( obj, {
 'border': '1px solid #081500', 
 'backgroundColor': '#906090', 
 'lineHeight' : '100%'
});

Wie immer ist zu beachten, dass Bindestriche in Attributsnamen entfernt und danach groß weiter geschrieben wird. Aus “background-color” wird demnach “backgroundColor“.

Update
Die CSS-Angabe float kann nicht 1:1 übersetzt werden. Für den Firefox muß cssFloat und für den Internet Explorer styleFloat benutzt werden. Man muß nicht zwangsläufig unterscheiden und kann einfach immer beide Werte setzen.

Bewertung: najagut
Loading ... Loading ...

Ähnliche Beiträge



2 Kommentare zu CSS-Reset mit Javascript und ohne eval()

Avatar

Tom

30. März 2009 um 18:41:35

Praktisches Snippet, sowas kann ich gerade auch brauchen.
Was mich generell am System stört ist dass die CSS und JS bezeichnungen für die Attribute nicht einheitlich sind, so muss man immer erst nachschlagen.

Avatar

admin

31. März 2009 um 15:38:46

Die Syntax ist eigentlich sehr simpel. Schau dir nochmal den Letzten Satz meines Beitrags an.

Du kannst dir ohne Probleme eine Funktion schreiben, die aus background-color backgroundColor etc. macht. Mir sind keine Ausnahmen bekannt.

Eine Funktion findest du hier.

Schreib einen Kommentar

Fülle das Kommentar-Formular vollständig aus oder melde dich über Twitter oder Facebook an.
Sign in with Facebook

By Teledir Internetanbieter