[Erledigt] Dynamische Elemente (createElement) per CSS ansprechen

Arne Drews · 01.09.2010, 16:01

Hi,

Ich generiere HTML-Elemente (z.B. DIV) nach folgendem Schema:

Code:

var obj = document.createElement('div');
obj.setAttribute('id', 'meindiv');
body.appendChild(obj);

Nun möchte ich per CSS drauf zugreifen, als Beispiel:

Code:

#meindiv { background:#f00; }

Leider bleibt das ohne Erfolg.
Mache ich hingegen folgendes per javascript:

Code:

document.getElementById('meindiv').style.background = '#f00';

funktionierts.

Aber ich muß doch auch mit der CSS Variante die Elemente ansprechen können, oder?
Zur Info: die Elemente werden an das Dokument gehängt, bevor das CSS geladen wird...

ChrisB · 01.09.2010, 16:03

setAttribute sollte man wo immer möglich vermeiden - insb. im IE ist das problematisch.
Verwende stattdessen obj.id = "meindiv";

Edit: Wenn der Zugriff über getElementById funktioniert, ist das aber vermutlich nicht die Ursache.
Ggf. ein Problem mit der Spezifität der Selektoren? (Bei Verwendeung des ID-Selektors zwar auch eher unwahrscheinlich.)
Zeig' mal etwas mehr relevanten Code, bzw. möglichst gleich ein Online-Beispiel.

Zitat:

Zur Info: die Elemente werden an das Dokument gehängt, bevor das CSS geladen wird...

Das sollte vollkommen egal sein, CSS wird immer „live“ ausgewertet.

Arne Drews · 01.09.2010, 16:18

Hi Chris,

Also Online-Beispiel kann ich Dir momentan nicht bieten, aber hier Original-Zeilen des Quelltextes:

Code:

var bcon = document.createElement('div');
bcon.id = 'bcon'; // schonmal umgesetzt. Klappt, Danke!

var divbcon = document.getElementById('bcon');
divbcon.style.background = "#000";

Ich möchte nun - weil es sich um einen Menge weitere Elemente handelt - die Formatierung in einer CSS vornehmen.

Alternativ zu dem obigen Verfahren, funktioniert das hier nicht:

Code:

/* CSS Datei */
#bcon { background:#000; }

Das sollte doch eigentlich funktionieren.
Das CSS wird korrekt geladen, weil andere statische HTML-Elemente entsprechend formatiert werden.

Kurios, nicht wahr?!

ChrisB · 01.09.2010, 16:40

Zitat:

Zitat von Arne Drews

Das sollte doch eigentlich funktionieren.

Ja - deshalb aber auch ohne vollständiges Beispiel nicht zu sagen, wo der Fehler liegt.

Arne Drews · 01.09.2010, 16:44

Kann das grad nicht hochladen, aber ich reich'n Link nach, vielleicht kannst' dann mehr sehen.
Danke erstmal...

nikosch · 01.09.2010, 17:29

divbcon.style.background = "#000"; erzeugt eine Inline-Angabe, die zumeist höhere Priorität hat. Benutze im CSS mal !important. Wenn das klappt, gehts ans Debuggen, wo eine priorisierte Angabe steht.

Arne Drews · 01.09.2010, 21:52

Jep... Hab nicht dran gedacht, daß das eine Script auch per document.getElementById() drauf zugreift und den Style ändert.
Entfernt -> Fehler behoben!

Dank an Euch beide für die Mühe.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Elemente aus erzeugtem Array aussortieren und weiter verarbeiten	bello_1234	PHP Tipps 2010	9	18.06.2010 19:45
Dynamische Signatur	KazuMikura	PHP Tipps 2010	1	12.05.2010 19:11
[Erledigt] css Elemente mehrfach bezeichnen	Shen	HTML, Usability und Barrierefreiheit	5	03.06.2009 19:26
Listbox in der man Elemente verschieben kann	Bronks	JavaScript, Ajax und mehr	2	27.01.2009 14:03
[Erledigt] DIV Elemente Formatieren	PHP-Newcomer	HTML, Usability und Barrierefreiheit	7	20.10.2008 22:27
HTML-Knoten ansprechen	Zergling-new	HTML, Usability und Barrierefreiheit	6	02.05.2008 04:46
Welche Elemente B sind ähnlich dem Element A	Anwender27	Scriptbörse	7	01.05.2008 11:45
Formular in Hauptfenster auf iframe ansprechen	R.E.M.	HTML, Usability und Barrierefreiheit	2	24.09.2006 15:33
Unsichtbares Formularfeld mit Javascript ansprechen	mAy^daY	HTML, Usability und Barrierefreiheit	6	13.08.2006 21:25
Seite per ID ansprechen?	tayke	PHP Tipps 2006	4	01.06.2006 23:37
Dynamische Grafik in PHP		PHP Tipps 2005-2	6	26.07.2005 11:47
[Erledigt] XML mit PHP - alles weg bis auf die veränderten Elemente?		PHP-Fortgeschrittene	2	22.06.2005 18:39
einzelne elemente eines arrays gehn verloren bei "inclu		PHP Tipps 2005	2	16.03.2005 23:32
Alle dynamisch erstellen Elemente verschicken		HTML, Usability und Barrierefreiheit	3	23.09.2004 15:38

01.09.2010, 16:01
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.341 PHP-Kenntnisse: Anfänger	[Erledigt] Dynamische Elemente (createElement) per CSS ansprechen Hi, Ich generiere HTML-Elemente (z.B. DIV) nach folgendem Schema: Code: var obj = document.createElement('div'); obj.setAttribute('id', 'meindiv'); body.appendChild(obj); Nun möchte ich per CSS drauf zugreifen, als Beispiel: Code: #meindiv { background:#f00; } Leider bleibt das ohne Erfolg. Mache ich hingegen folgendes per javascript: Code: document.getElementById('meindiv').style.background = '#f00'; funktionierts. Aber ich muß doch auch mit der CSS Variante die Elemente ansprechen können, oder? Zur Info: die Elemente werden an das Dokument gehängt, bevor das CSS geladen wird... __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

01.09.2010, 16:18
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.341 PHP-Kenntnisse: Anfänger	Hi Chris, Also Online-Beispiel kann ich Dir momentan nicht bieten, aber hier Original-Zeilen des Quelltextes: Code: var bcon = document.createElement('div'); bcon.id = 'bcon'; // schonmal umgesetzt. Klappt, Danke! var divbcon = document.getElementById('bcon'); divbcon.style.background = "#000"; Ich möchte nun - weil es sich um einen Menge weitere Elemente handelt - die Formatierung in einer CSS vornehmen. Alternativ zu dem obigen Verfahren, funktioniert das hier nicht: Code: /* CSS Datei / #bcon { background:#000; } Das sollte doch eigentlich funktionieren. Das CSS wird korrekt geladen, weil andere statische HTML-Elemente entsprechend formatiert werden. Kurios, nicht wahr?! __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.* Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein

01.09.2010, 16:44
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.341 PHP-Kenntnisse: Anfänger	Kann das grad nicht hochladen, aber ich reich'n Link nach, vielleicht kannst' dann mehr sehen. Danke erstmal... __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein

01.09.2010, 17:29
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.256 PHP-Kenntnisse: Fortgeschritten	divbcon.style.background = "#000"; erzeugt eine Inline-Angabe, die zumeist höhere Priorität hat. Benutze im CSS mal !important. Wenn das klappt, gehts ans Debuggen, wo eine priorisierte Angabe steht. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.09.2010, 21:52
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.341 PHP-Kenntnisse: Anfänger	Jep... Hab nicht dran gedacht, daß das eine Script auch per document.getElementById() drauf zugreift und den Style ändert. Entfernt -> Fehler behoben! Dank an Euch beide für die Mühe. __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein