CSS Klasse erstellen

[DaveDamage]

Hallo, ich stehe im Moment vor folgendem Problem:

Ich erstelle über einen Link ein Div und füge es in die Seite ein. Das div erhält eine eindeutige ID sowie className. Jedes erstellte div soll eine eigene css Klasse zugewiesen bekommen, was bedeutet, dass ich dynamisch css Klassen erstellen muss.

Einen Lösungsansatz habe ich im Netz nicht gefunden, hoffe hier hat jemand eine Idee

Grüße, Dave

 

[hela]

... Das div erhält eine eindeutige ID sowie className. Jedes erstellte div soll eine eigene css Klasse zugewiesen bekommen, ...

Hallo Dave,
wenn jeder DIV-Block schon eine eindeutige ID hat, dann kannst du schon über die "getElementById()"-Methode und das style-Objekt die entsprechenden Eigenschaften zuweisen. Warum willst du das noch über Klassen regeln?

 

[DaveDamage]

Aus dem einfachen Grund, dass die Klassen der vorhandenen Divs bearbeitet werden können und diese Bearbeitung auf Klassen-Basis stattfindet.

Das Szenario sieht so aus, dass ich auf einer Seite bin, klicke ein Div an, es öffnet sich ein Overlay mit Formularfelder, in denen ich die neuen Werte eingeben kann. Ohne dass die Seite neu lädt, wird somit das Aussehen der Seite verändert.

Da die Bearbeitung wie gesagt auf Klassenbasis stattfindet, könnte ich mein Script zwar umschreiben, möchte ich aber nicht

 

[FipsTheThief]

Naja in meinen Augen gibt es nur 2 Möglichkeiten , a) man vergibt dem Ding einen CSS Klassen Namen. oder b) man fügt einfach dem Style Attribute Werte hinzu.

Ob man nun vorhandene Style Attribute auslesen kann weiss ich nicht genau hab ich bis jetzt noch nicht getestet.

getAttribute();
setAttribute();

kenn ich nun beide noch, sowie getComputedStyle() || currentStyle (IE). zum auslesen von CSS Eigenschaften allerdings dann schon welche über CSS definiert wurden.

Mein Ansatz wäre nun :

function cssAttrib(obj,styleObject) {
    for(key in styleObject) {
        eval('obj.style.'+key+'= styleObject[key]');
    }
}

var cssValues = {
    position:"relative",
    height:"100px",
    width:"200px",
    background:"#000"
}

cssAttrib(document.getElementById("testbox"),cssValues);

Mit Hilfe der JSON Notation geben wir cssAttrib ein Objekt mit auf den Weg wo alle möglichen neuen Attribute stehen die wir dem HTML Element verpassen wollen.

So in dieser Richtung hab ich das bei mir mal gelöst.

Alles was Du nun machen müsstest wären die Eingaben über deine Textarea halt in dieses Format umzuwandeln dann.

 

[DaveDamage]

Danke für die Antwort, aber wie gesagt, ich vergebe einen CSS Klassen Namen. Allerdings gibt es die CSS Klasse noch nicht und muss dynamisch erstellt werden.

Klar, dem Style-Attribut Werte mitgeben ist kein Problem, bringt mich aber an dieser Stelle nicht weiter. Trotzdem danke für deine Mühe

 

[Sven Mintel]

http://www.webscriptexpert.com/Javascript/createCSS: dynamically create CSS rules via JavaScript/