Javscript Vendor Prefixes

[Pixel-Wizard]

Hallo zusammen

Wie ihr sicher wisst, braucht es bei einigen CSS3 Techniken wie zum Beispiel transform, Vendor Prefixes welche die Technik im ansprechenden Browser sichtbar machen. Im folgenden ein Code-Beispiel:

element{
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

Wie ist es nun möglich diese Vendor-Prefixes bei, mittels Javascript veränderten CSS Werten einzufügen. Folgendermassen geht es nämlich leider nicht

document.getElementById("[I]elementID[/I]").style.webkitTransform = "rotate(180deg)";
document.getElementById("[I]elementID[/I]").style.oTransform = "rotate(180deg)";
document.getElementById("[I]elementID[/I]").style.msTransform = "rotate(180deg)";
document.getElementById("[I]elementID[/I]").style.transform = "rotate(180deg)";

 

[Tronjer]

Schreibe die Styles in eine CSS-Klasse und mache dann sowas:

$('#elementId').addClass('cssClass');

 

[Pixel-Wizard]

Gibt es keine andere Möglichkeit, wie zum Beispiel direkt im Javascript, die Vendor Prefixes zu vergeben? Dies hätte folgende Vorteile:

- Zum einen gäbe es viel weniger Programmierarbeit
- Zum anderen wäre es unkomplizierter und der Code wäre einfacher zu verstehen
- Und zuletzt würde es sich am besten anpassen und man müsste keine Timeout Funktionen einbauen (wenn rotate fertig remove class um sie wieder zu vergeben)

Ich hoffe auf einfachere Antworten ;-)

Liebe Grüsse
Pixel-Wizard

 

[Tronjer]

Klar lässt sich das vereinfachen. Man könnte ein Framework verwenden, welches im CSS die prefixes generiert, oder Less einsetzen und eine eigene Funktion dafür schreiben. Lohnt sich aber nur, wenn das CSS sehr umfangreich ist.

Der Weg über das style-Objekt von JS hingegen ist antiquiert und man müsste wesentlich mehr Code schreiben. Wenn du keine CSS-Klassen willst, gibt es in jQuery immer noch die Funktion css(). Damit sollte es auch funktionieren.

 

[omoxen]

naja, du kannst ja schon mit JS den Browser abfragen. Und dann wähl einfach die passende Eigenschaft aus. Außerdem kannst du mit JS eigene Stylesheets definieren (document.styleSheets usw.).
Allerdings macht das kaum Sinn. Und die Styles sollte man eigentlich nur mit CSS anpassen. Außerdem gibt es, soweit ich weiß, event-handler für css-transitions und mit jQuery ist das sowieso kein Problem.