• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] ID bezogenes CSS ansprechen

mikdoe

mikdoe

Moderator
Kurze Frage. In der CSS ist diese Klasse definiert:
HTML: 
#hauptmenue .item { ..... }
Wie kann ich bei der Erzeugung eines DOM Elements mittels JS über .className darauf zugreifen?
Diese Varianten haben alle nicht funktioniert: .className='#hauptmenue .item' und 'hauptmenue .item' und '#hauptmenue item' und 'hauptmenue item'
 
Im normalen JS so:
document.getElementById("").getElementsByClassName("")[0];
 
Das war ein Mißverständnis.
In der CSS Datei gibt es eine Klasse, die mit #hauptmenue .item { ..... } definiert ist.
Nun erzeuge ich mit JS ein Element, nämlich einen Button. Und auf diesen Button möchte ich gerne diese Klasse anwenden mit btn.className = '?'; damit der Butto genau so aussieht wie alle Elemente ".item" im div "hauptmenue".
Aber was muss ich bei ? einsetzen?
 
item, denn ein punkt in einer CSS datei definiert eine Klasse, während die Raute lediglich eine bestimmte Id anspricht.

sollte das nicht klappen, was du da bastels, könnte dir das hier vielleicht weiter helfen. Mein Lösungsvorschlag:

Code: 
<html>
  <head>
    <script src="js/jquery.js"></script>
    <script>
      i = 3
      function addItem() {
        i++;
        var divhtml = $("#hauptmenue").html();
        var newbotton = "<button class=\"item\">text" + i + "</button> ";
        divhtml += newbotton;
        $("#hauptmenue").html(divhtml);
      }
    </script>
    <style>
      #hauptmenue .item {
        border: 3px dashed #f30;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div id="hauptmenue">
      <button>text</button>
      <button class="item">text2</button>
      <button class="item">text3</button>
    </div><br><br><br>
    <button onClick="addItem();">
      start
    </button>
  </body>
</html>

Dein #hauptmenue spricht doch nur das übergeordnete Div an. Die Elemente in dem Div brauchen doch nur die classe. Solltest du also mit addClass arbeiten wollen, müsstest du doch eigentlich nur item reinschreiben, ohne punkt und ohne raute.

Aber ich glaube das ist zu einfach, als dass du das nicht weißt oder? :D
 
Zuletzt bearbeitet:
Das geht nicht. Dieser CSS Selektor spricht nur Elemente an, die die CSS-Klasse "item" haben und innerhalb eines Elementest ist, das die ID "hauptmenue" hat.

Wenn du die Definition noch für etwas anderes verwenden willst, musst du das CSS erweitern:
Code: 
#hauptmenue .item, .deineNeueKlasse { ..... }

EDIT: @weedo: um neue Elemente in einem Element zu erzeugen ist dein Weg extrem ungünstig. In jQuery gibt es dafür .append()...
 
Zuletzt bearbeitet:
[strike]Korbinian, und was verwende ich dann in der className Zuweisung? '.deineNeueKlasse' und 'deineNeueKlasse' ziehen nicht.[/strike]

Vergiss es, die Zeile war noch auskommentiert *klatsch* :)

btn.className = 'deineNeueKlasse'; funktioniert
 
Zuletzt bearbeitet:
@weedo, danke dir auch für die Mühe. Aber die Zusatzdefinition im CSS von Korbinian erscheint mir die einfachste und sicherste Lösung zu sein.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben