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.

    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.

        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.
            --

            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
            Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


            --

            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