Sonntag, Dezember 15, 2019

javascript – das wechseln von einer Klasse‘ Stil

Arbeite ich mit jQuery für eine Weile, aber jetzt will ich etwas schreiben, in reinem javascript und es ist beweisen, um eine Herausforderung sein..
Eines meiner größten Probleme im moment ist, dass ich noch keinen Weg gefunden, festlegen/ändern-styling für die a-Klasse. Dies ist nicht ein problem für Elemente mit der id, aber das will ich ändern das styling für eine Gruppe von Elementen mit der gleichen Klasse und nicht nur für ein element mit einer id..
In jQuery würde ich einfach schreiben:

$('.someClass').css('color','red')

Gibt es wirklich keine einfache äquivalenz dieser in reinem js?

  • Dies kann nützlich sein: stackoverflow.com/questions/1933602/…
  • nicht ein Duplikat ist. Der OP möchte ausdrücklich ein nicht-jquery-Antwort.
  • Sorry, hab nicht sehr genau gelesen.
  • Siehe mein edit weiter unten. Sie können einfach wickeln Sie es und stellen Sie es in eine Funktion.
InformationsquelleAutor user1231410 | 2012-02-24

5 Kommentare

  1. 19

    Versuchen Sie die folgenden

    var all = document.getElementsByClassName('someClass');
    for (var i = 0; i < all.length; i++) {
      all[i].style.color = 'red';
    }

    Hinweis: Als Fröhlich wies darauf hin getElementsByClassName funktioniert nicht im IE. Die verlinkte Frage ist ein schöner Weg, um diese Einschränkung zu umgehen

    • IE vor 9 nicht unterstützt. stackoverflow.com/questions/7410949/…
    • Oder auch „for(i in allen)“ ich wenigstens glaube, es funktioniert nicht-strict-Modus zu.
    • das ist dissapointing. Aktualisieren
    • Es ist gut, aber es wird nicht aktualisiert, wenn das nächste element mit dieser Klasse erstellt werden. Richtig ?
  2. 3
    var all = document.getElementsByClassName('someClass');
    for (var i = 0; i < all.length; i++) {
      all[i].className += " red"; 
    }

    Zur besseren Codierung-Stil hinzufügen, eine andere Klasse auf die Elemente mit dem code oben und dann CSS verwenden, ändern Sie die Farbe aller Elemente, die:

    .red {
      color:red;
    }
  3. 1

    Können Sie verwenden-Selektor-Bibliothek, zum Beispiel Brutzeln: http://sizzlejs.com/ aber wenn Sie wollen, reines JS, dass ich denke, Sie stecken mit, erhalten alle Elemente, und dann programmatisch „Handlese“ diejenigen, die Klassen, die Sie interessiert mit RegEx wie diese zum Beispiel:

    Dies ist ein äquivalent für Ihre JQuery-oneliner:

    for( i in document.all) document.all[i].className && /\bpost-text\b/g.test(document.all[i].className) && (document.all[i].style.color = "red")

    🙂

    Wenn Sie nicht brauchen, es in eine Zeile und machen Sie es schneller (und viel besser lesbar):

    var myClassName = "someClass";
    var regexp  = RegExp("\b"+myClassName+"\b/g");
    var elements = document.all;
    for( i in elements){
      var this_element = elements[i];
      if(regexp.test(this_element.className){
        this_element.style.color = "red";
      }
    }

    Wenn „for( i in Objekt)“ für Sie nicht funktioniert, nur mit der klassischen for-Schleife „for(var i = 0; i < Elemente.length; i++)„.

    Könnte es sein ‚verschönert‚ ein bisschen mit dem Einsatz von einige etwas mehr erweiterte JS-Konzepte (die array-Funktion-Zuordnungen -, Falt-und solche), die JS-version sind Sie Codierung gegen? Ich denke, es ist nicht ECMA Script 5, richtig?

    Schauen Sie sich auch diese Frage/Antwort Holen Sie sich Alle Elemente in einem HTML-Dokument mit einer bestimmten CSS-Klasse

  4. 0

    Können Sie verwenden:

    document.getElementById("MyElement").className = "NewClass";

    ändern Sie die Klasse des Elements und dann eben definieren Sie den Stil für die neue Klasse in der CSS-Datei

Kostenlose Online-Tests

Letzte Fragen

Tun ItemView löst Blase?

Ich habe eine CompositeView für eine Tabelle. Ich habe Trigger-set in der Kind-ItemView für jede Zeile... var TableRow = Marionette.ItemView.extend({ tagName:...

Wie kann ich untersuchen, WCF was 400 bad request über GET?

Die folgenden WCF-endpoint funktioniert gut mit dem WCF test client: AssetList ListFlaggedAssets(short processCode, string platform, string endpoint = "null", string portalId = "null", int...

Bei der Verwendung von UUIDs, sollte ich auch mit AUTO_INCREMENT?

Wir bauen eine neue web-app, die eine offline-iPad - /Android-app-version auf einer Reihe von lokalen Geräten, die Einsätze mit neuen Daten. Als solche benötigen...

Actionscript-Objekt, das verschiedene Eigenschaften

Wie kann ich die Anzahl der Eigenschaften in einer generischen Actionscript-Objekt? (Wie die Array-Länge) InformationsquelleAutor Fragsworth | 2011-01-15

Wie plot mehrere Graphen und nutzen Sie die Navigations-Taste im [matplotlib]

Die neueste version von matplotlib erstellt automatisch Navigations-buttons unter den graph. Aber die Beispiele, die ich finden alles im Internet zeigen, wie erstellen Sie...