Mike: Kann javascript auch Klassen ansprechen?

SELF-Forum

Kann javascript auch Klassen ansprechen?

Mike
– Informationen zu den Bewertungsregeln

Hi,

bin grad dabei mich mit javascript zu beschäftigen. Ich möchte das untenstehende Beispiel so haben, dass der Absatz nicht mit  id="DynText" sondern mit class="DynText" ausgezeichnet wird. Dann greift aber javascript nicht mehr. Ich suche seit über einer Stunde und weiss immernoch nicht, wie ich den javascript Code entsprechend ändern kann, dass dieser auch auf class="DynText" greift.

Hintergrund: Ich möchte mehrere Absätze (<p class="DynText">Das ist der Text</p>) und da ich ID nur einmal nutzen darf muss ich Class nehmen.

  
  
<html><head><title>Test</title>  
<script type="text/javascript">  
function MachGelb () {  
  document.all.DynText.style.backgroundColor = "yellow";  
  document.all.DynText.style.fontSize = "200%";  
  document.all.DynText.style.padding = "15px";  
}  
</script>  
</head><body>  
<p id="DynText">Das ist der Text</p>  
<a href="javascript:MachGelb()">gelb</a>  
</body></html>

Danke im Voraus

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Kann javascript auch Klassen ansprechen?

    Dirk Dorweiler
    – Informationen zu den Bewertungsregeln

    Hoi.

    Ich möchte das untenstehende Beispiel so haben, dass der Absatz nicht mit  id="DynText" sondern mit class="DynText" ausgezeichnet wird. Dann greift aber javascript nicht mehr. Ich suche seit über einer Stunde und weiss immernoch nicht, wie ich den javascript Code entsprechend ändern kann, dass dieser auch auf class="DynText" greift.

    http://www.google.de/search?hl=de&q=getElementsByClassName

    Grüße

    PS:

    document.all.DynText.style.fontSize = "200%";

    Besser:
    document.getElementById('DynText').style.fontSize = "200%";

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Kann javascript auch Klassen ansprechen?

      Mike
      – Informationen zu den Bewertungsregeln

      »» document.all.DynText.style.fontSize = "200%";

      Besser:
      document.getElementById('DynText').style.fontSize = "200%";

      Danke :)

      document.getElementsByClassName('DynText').style.fontSize = "200%";

      Warum greift das nicht?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Kann javascript auch Klassen ansprechen?

        Dirk Dorweiler
        – Informationen zu den Bewertungsregeln

        document.getElementsByClassName('DynText').style.fontSize = "200%";
        Warum greift das nicht?

        Lies doch bitte mal durch die von mir verlinkten Google Treffer, dann wird die Antwort schnell klar werden.

        Alternative: Nutze *SELF*HTML und prüfe die Existenz von "getElementsByClassName".

        Grüße

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Kann javascript auch Klassen ansprechen?

          Mike
          – Informationen zu den Bewertungsregeln

          Alternative: Nutze *SELF*HTML und prüfe die Existenz von "getElementsByClassName".

          Grüße

          Die Links "sagten mir nichts" (zumindestens nicht ohne langes stöbern) und hier finde ich nur Foreneinträge. Es hat mit der Lösung von Gunnar funktioniert. Wenn du mir aber erklären möchtest, was da falsch war oder mir einen Link auf SelfHTML postest, freue ich mich :)

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Kann javascript auch Klassen ansprechen?

            Frederik
            – Informationen zu den Bewertungsregeln

            »» Alternative: Nutze *SELF*HTML und prüfe die Existenz von "getElementsByClassName".
            Die Links "sagten mir nichts" (zumindestens nicht ohne langes stöbern) und hier finde ich nur Foreneinträge. Es hat mit der Lösung von Gunnar funktioniert. Wenn du mir aber erklären möchtest, was da falsch war oder mir einen Link auf SelfHTML postest, freue ich mich :)

            getElementsByClassName ist erst für HTML5 vorgesehen. Bis dahin gibt es einige JavaScript-Bibliotheken, die das implementieren. Also baust Du Dir entweder selbst eine kleine, maßgeschneiderte Lösung oder verwendest eine entsprechende Bibliothek.

            Liebe Grüße
            Frederik

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Kann javascript auch Klassen ansprechen?

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    @@Mike:

    Hintergrund: Ich möchte mehrere Absätze (<p class="DynText">Das ist der Text</p>) und da ich ID nur einmal nutzen darf muss ich Class nehmen.

    Du änderst besser mit JavaScript die Klassenzugehörigkeit eines übergeordneten Elements ('body' könnte sich anbieten) und stylest deine Absätze per Nachfahrenselektor:

    function MachGelb ()  
{  
  document.body.className += " gelbGemacht";  
}

    .gelbGemacht .DynText  
{  
  background-color: yellow;  
  font-size: 200%;  
  padding: 15px;  
}

    Die Benennungen "MachGelb" und "gelbGemacht" solltest du dringend nochmal überdenken. Was ist, wenn du das in einem halben Jahr nicht mehr gelb, sondern blau haben möchtest?

    Es ist keine gute Idee, Funktionen/Klassen nach der _gegenwärtig_ gewünschten Darstellung zu benennen. Benenne nach der Funktion!

    Live long and prosper,
    Gunnar

    PS: @Cybaer: Lass mal deine Kanone im Stall! >;->

    --
    Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Kann javascript auch Klassen ansprechen?

      Mike
      – Informationen zu den Bewertungsregeln

      Du änderst besser mit JavaScript die Klassenzugehörigkeit eines übergeordneten Elements ('body' könnte sich anbieten) und stylest deine Absätze per Nachfahrenselektor:

      function MachGelb ()

      {
        document.body.className += " gelbGemacht";
      }

      
>   
> ~~~css

.gelbGemacht .DynText  

> {  
>   background-color: yellow;  
>   font-size: 200%;  
>   padding: 15px;  
> }

      Die Benennungen "MachGelb" und "gelbGemacht" solltest du dringend nochmal überdenken. Was ist, wenn du das in einem halben Jahr nicht mehr gelb, sondern blau haben möchtest?

      Echt super, das hat geklappt...

      Mit dem Namen hattest du Recht, das war aber nur ein Beispiel von SELFHTML.

      Danke nochmal!

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln