Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Dynamische Elemente (createElement) per CSS ansprechen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [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...
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

  • #2
    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.

    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.
    [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

    Kommentar


    • #3
      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?!
      Competence-Center -> Enjoy the Informatrix
      PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

      Kommentar


      • #4
        Zitat von Arne Drews Beitrag anzeigen
        Das sollte doch eigentlich funktionieren.
        Ja - deshalb aber auch ohne vollständiges Beispiel nicht zu sagen, wo der Fehler liegt.
        [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

        Kommentar


        • #5
          Kann das grad nicht hochladen, aber ich reich'n Link nach, vielleicht kannst' dann mehr sehen.
          Danke erstmal...
          Competence-Center -> Enjoy the Informatrix
          PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

          Kommentar


          • #6
            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.
            [COLOR="#F5F5FF"]--[/COLOR]
            [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
            [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
            [COLOR="#F5F5FF"]
            --[/COLOR]

            Kommentar


            • #7
              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.
              Competence-Center -> Enjoy the Informatrix
              PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

              Kommentar

              Lädt...
              X