Javascript onclick ändern Sie die Farbe von mehr als einem element

Ich die Farbe ändern möchten mehr als ein element in eine Seite durch einen Klick auf eine Schaltfläche. Ich dachte wirklich, das wäre sehr, aber ich bin mit vielen Schwierigkeiten zu erreichen. Mein code wie folgt ändert das erste element - und ich weiß, das ist, weil ich bin mit Dokument.getElementById, aber wenn ich es ändern zu dokumentieren.getElementByClass, Stoppt es zu arbeiten. Ich habe versucht, inline-styles und internen Stile ohne Erfolg. Kann jemand bitte bitte bitte erklären, wie dies zu tun. Ich bezweifle, dass dies unmöglich ist. Danke. 

<html>
<head>
<style>
#p1{color:#4d982b;}
</style>
<script type="text/javascript">
function ChangeStyle()
{
document.getElementByClass("p1").style.color="#aaaaaa";
}
</script>
</head>
<body>

<p class="p1">Hello world!</p>
<p class="p1">Hello world!</p>

<input type="button" onclick="ChangeStyle()" value="Change style" />

</body>
InformationsquelleAutor Elaine McGovern | 2012-02-24
  1. 0

    Ich glaube, Sie denken darüber nach, dokumentieren.getElementsByClassName - vielleicht kann jemand klären, für mich, aber ich glaube getElementById ist der einzige singuläre zurück auf erste Elemente.

    Also sagen wir, dass Sie versuchen, alle Elemente mit der Klasse "foo"...

    var elem = document.getElementsByClassName('foo')
for (var i = 0;i < elem.length; i++)
{
elem[i].style.color = '#aaaaaa'
}

    Wahrscheinlich gibt es syntax-Fehler da oben, aber ich denke, Sie bekommen die Allgemeine Idee~

    • Vielen Dank für die Hilfe mit diesem. Ich hätte an den Haaren ziehen Bühne. Kurze Frage, jeder Weg, um die gleiche Arbeit mit dem IE? Oder sollte ich einfach akzeptieren, dass es nicht unterstützt wird?
    • Es ist, weil Sie nicht über eine DOC-TYP deklariert, an der Spitze. :] Zu klären, wenn kein doc-Typ deklariert ist internet explorer standardmäßig auf "quirks-Modus" - bestimmte Funktionen, die normalerweise nicht verfügbar sind im quirks-Modus. w3schools.com/html5/tag_doctype.asp
    InformationsquelleAutor Snuffleupagus
  2. 2

    dies erfolgt in der Regel eine Klasse statt einer id.

    Es kann nur eine id pro Seite.
    ändern Sie Ihren code so,

    <p class="myclass">Hello world!</p>
<p class="myclass">Hello world!</p>

    Verwenden Sie dann javascript, um die Klasse zu ändern Farb-Attribute

    Hier ist ein link, der hilft
    Wie getElementByClass anstelle von GetElementById mit Javascript?

    • Vielen Dank für Ihren Kommentar, aber ich wusste, dass, aber wenn ich das mache Dokument.getElementByClass("p1").Stil.color="#aaaaaa"; nichts passiert.
    • bitte überprüfen Sie den link, den ich gerade Hinzugefügt, es sollte sich eine Lösung für Ihr Problem.
    • Thnks, so viel für Ihre Hilfe
    • Dies sollte eigentlich als "Antwort" gekennzeichnet. Wenn Sie wollen, dass es im IE funktioniert, die Antwort ist in dem link oben, und das war die erste Antwort. Müssen Sie erstellen eine benutzerdefinierte Implementierung der getElementByClassName Methode.
    • Danke für den Kommentar 😉
    InformationsquelleAutor Olivier Refalo
  3. 1

    Können Sie keine Elemente auf der Seite mit der gleichen id. id soll eindeutig sein, um ein einzelnes element, also, wenn Sie rufen getElementById("p1") es wird nur wählen Sie die erste id mit Wert "p1".

    Die Lösung ist die Verwendung von Klassen, oder 2 getElementById Anrufe, mit 2 verschiedenen id's.

    • Ah, wusste ich, dass wäre ein Problem, aber wenn ich ändern der id der Klasse, nichts funktioniert. Was mache ich falsch? <html> <head> <style> #p1{color:#4d982b;} </style> <script type="text/javascript"> function ChangeStyle() { document.getElementByClass("p1").Stil.color="#aaaaaa"; } </script> </head> <body> <p class="p1">Hello world!</p> <p class="p1">Hello world!</p> <input type="button" onclick="ChangeStyle()" value="Stil Ändern" /> </body>
    • Überprüfen Sie die Links, die von Olivier. stackoverflow.com/questions/1933602/..., die Sie brauchen, um eine Schleife durch jedes der Elemente mit der Klasse "p1"
    • Richtig, also was Sie tun muss, ist getElementsByClassName() wie hier erwähnt: stackoverflow.com/questions/7480496/...
    • Hier ist eine funktionierende fiddle Beispiel. Hinweis: die [1] zu ändern ist das zweite element. So dass Sie wollen, um eine Schleife durch die Elemente, die mit Ihrer Länge. jsfiddle.net/pJXh9
    • Dank einer million, die Hälfte meines Problems war, dass es nicht funktioniert mit IE, aber da brauche ich nur bei der Arbeit mit android-ich bin glücklich.
    InformationsquelleAutor anothershrubery
  4. 0

    Getelementbyid-Methode funktioniert nur mit einem element. Versuchen getelementsbyid, die ein array zurückgibt.

    InformationsquelleAutor manueldahmen
  5. 0

    IDs eindeutig sein müssen, so verwenden Sie Klassen-Namen statt:

    <p class="p1">Hello world!</p>
<p class="p1">Hello world!</p>

    document.getElementsByClassName Ergebnisse in einem array. Müssen Sie eine Schleife durch jedes element:

    var list = document.getElementsByClassName("p1");
for (var i = 0; i < list.length; i++) {
    list[i].style.color="#aaaaaa";
}
    • Sorry - Tippfehler. Ich hatte "Liste[i].Stil.style". Behoben.
    • Tatsächlich, es hat funktioniert, ich war gerade auf der Suche an es im IE.
    InformationsquelleAutor Diodeus - James MacFarlane
Schreibe einen Kommentar