nicht angemeldet
JavaScript CSS-Colorchanger
Guten Abend Selfer,
ich habe gerade quick'n'dirty etwas programmiert, was mir die Farbgestalung einer einfachen Seite erleichtern sollte:
Ein Skript wird eingebunden, das in der gegebene CSS-Datei nach bestimmten Kommentaren Ausschau hält. Aufgrund dieser Kommentare wird ein Ausklappmenü (absolut positionierter div mit visibility-toggle per JS) mit Farbwählern (JScolor.com) für jede kommentierte "Farbgruppe" angelegt. Ändert man hier die Farbe, bekommt man das Ergebnis on-the-fly zu sehen. Über den submit-Button können die neuen Farben dann direkt in die CSS-Datei geschrieben werde.
Das klappt soweit, ist aber eben quick'n'dirty.
Ich denke nun daran, das Prinzip etwas auszuweiten zu einem JavaScript gestützen On-the-fly-CSS-Designer.
Folgende Idee/Fragen
-
kann man per JS erfahren, welche CSS-Eigenschaften auf welchem Wege einem Element zugeordnet wurden?
-
mit welchem JS-Framework lässt sich einfach ein eigener Colorchooser einbinden, sodass ich nicht auf JS-Color angewiesen bin?
-
welches Framework bietet die mächtigsten Element-Selekt-Methode an? JQuerys $-Funktion?
-
manchmal möchte man bestimmte Farbwerte gruppieren, also z. B. möchte man, dass die Hintergrundfarbe des Footers stets der Farbe von Überschriften und den Rahmen von Bildern entspricht. Deshalb habe ich daran gedacht, eventuell mit CSS-Datei-Templates zu arbeiten, in dem dann an den genannten 3 Stellen jeweils der selbe Platzhalter stehen könnte. Ein Skript könnte dieses dann beim Laden mit den hinterlegten Werten rendern.. Idee?
-
geschickt wäre natürlich, wenn ich das ganze auf margins, paddings etc erweitern könnte, sodass ich quasi die CSS-Dateien on-the-fly mit direkter Ergebnisvorschau ändern kann
-
kann ich mit Javascript nur element.style.borderColor verwenden oder gibt es auch eine Möglichkeit direkt mit element.style quasi den Style wie im CSS zu definieren?
-
kann ich per JavaScript das neuanwenden eines Stylesheets erzingen, ohne dass die Seite neugeladen wird?
Bin euch für jede Idee oder Anregung dankbar
Grüße
fredji
-
Hi,
- kann man per JS erfahren, welche CSS-Eigenschaften auf welchem Wege einem Element zugeordnet wurden?
Du kannst die Stylesheets eines Dokuments auslesen, und ihre Regeln analysieren - das ist aber browserübergreifend etwas knifflig, siehe http://www.quirksmode.org/dom/changess.html. (Vielleicht bietet da irgendeines der Frameworks aber auch schon was fertiges.)
Inline-Styles sollten sich über Abfrage des style-Attributes (getAttribute) erfragen lassen.
- mit welchem JS-Framework lässt sich einfach ein eigener Colorchooser einbinden, sodass ich nicht auf JS-Color angewiesen bin?
Mit so gut wie jedem, würde ich vermuten.
- welches Framework bietet die mächtigsten Element-Selekt-Methode an? JQuerys $-Funktion?
Die dürften alle in etwas gleich mächtig sein - „mächtiger“ wirst du kaum brauchen.
- manchmal möchte man bestimmte Farbwerte gruppieren, also z. B. möchte man, dass die Hintergrundfarbe des Footers stets der Farbe von Überschriften und den Rahmen von Bildern entspricht. Deshalb habe ich daran gedacht, eventuell mit CSS-Datei-Templates zu arbeiten, in dem dann an den genannten 3 Stellen jeweils der selbe Platzhalter stehen könnte. Ein Skript könnte dieses dann beim Laden mit den hinterlegten Werten rendern.. Idee?
Ansätze für „Variablen“ in CSS gibt es bereits einige. Die erfinden meistens eigene Erweiterungen, die dann ein Parser vor der Auslieferung an den Browser in „normales“ CSS übersetzt.
- geschickt wäre natürlich, wenn ich das ganze auf margins, paddings etc erweitern könnte, sodass ich quasi die CSS-Dateien on-the-fly mit direkter Ergebnisvorschau ändern kann
Dazu gibt's auch schon diverse Ansätze, bspw. Online-Tools, wo du die Änderungen „live“ umgesetzt sehen kannst.
- kann ich mit Javascript nur element.style.borderColor verwenden oder gibt es auch eine Möglichkeit direkt mit element.style quasi den Style wie im CSS zu definieren?
Siehe wieder obigen Link - du kannst Stylesheet-Rules dynamisch erzeugen, und dabei einen kompletten String mit mehreren Eigenschaften-Definitionen zuweisen.
- kann ich per JavaScript das neuanwenden eines Stylesheets erzingen, ohne dass die Seite neugeladen wird?
Änderungen an den Stylesheets über die beschriebene Methode wirken sich direkt aus.
Bin euch für jede Idee oder Anregung dankbar
Allzu viel selber informiert hast du dich aber nicht vorher, oder?
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
- kann man per JS erfahren, welche CSS-Eigenschaften auf welchem Wege einem Element zugeordnet wurden?
Du kannst die Stylesheets eines Dokuments auslesen, und ihre Regeln analysieren
Das ist bei weitem nicht alles. Man muss zudem die http://de.selfhtml.org/css/formate/kaskade.htm@title=Kaskade implementieren. Das ist schon ein hartes Stück Arbeit.
Das fertige Script http://www.brothercake.com/site/resources/scripts/cssutilities/ dürfte einen Einstieg bieten.Mathias