Ich möchte die Hintergrund- / Vordergrundfarbe vieler Symbole mit derselben CSS-Klasse ändern. Im Moment mache ich es mit jQuery - wie $('back_COLORED').css('background-color', '#00FF00') , aber dieser Ansatz ist langsam , wenn es viele Elemente mit einer solchen Klasse (& gt; 900) gibt.
Es liegt daran, dass jQuery CSS-Regeln nicht selbst ändert, sondern alle Elemente einzeln findet und Inline-Stile auf sie anwendet. Zumindest sehe ich das im Inspektor. Die Frage ist also:
UPD : Ich versuche, eine Art Farbschema-Editor zu erstellen. Die Quelle ist Ссылка . Kümmern Sie sich nicht um PHP Dinge, Editor ist vollständig Client-Seite (mit nur ein paar Bibliotheken aus dem Netz geholt).
UPD2 : Versuchter Leinwand-Ansatz, immer noch langsam. Canvas-Zweig ist Ссылка .
Wenn Sie das Eltern-Div durch ID auswählen können, könnten Sie vielleicht nach dem Tag darin auswählen? Oder gibt es Elemente der gleichen Art, die die Farbe ändern sollten und die nicht innerhalb des Elternteils?
Es wäre schön, eine Vorstellung davon zu haben, was Sie hier bauen. 900+ Objekte scheinen viel zu sein ... vielleicht könnte ein völlig anderer Ansatz verwendet werden? Leinwand, SVG?
Die browserübergreifende Methode zum Überschreiben einer Klassendefinition besteht darin, eine neue Regel zu schreiben und sie am Ende des letzten Stylesheets im Dokument einzufügen. Sie können eine vorhandene Stilregel bearbeiten, aber selbst einige neuere Browser können es schwierig machen.
%Vor%Sie können so viele 'property: value;' Bits im csstext, wie Sie brauchen. Denken Sie daran, ein '.' zu einem Klassennamen oder einem '#' zu einer ID, und die CSS muss als Stilregel geschrieben werden (mit Bindestrichen, nicht CamelCase).
Natürlich werden Inline-Stile nicht überschrieben, und es ist für kleine lokale Änderungen übertrieben. Es kann auch das Neuzeichnen der Seite offensichtlicher machen als das Ändern eines Elementes nach dem anderen, aber es könnte genau das sein, was du hier brauchst.
Es gibt verschiedene Möglichkeiten, je nachdem, mit welchem Browser Sie arbeiten. Dies ist im Quirks-Modus dokumentiert .
Einige Bibliotheken bieten eine Abstraktionsschicht, z. B. das YUI-StyleSheet-Dienstprogramm .
Es sollte eine deutliche Leistungssteigerung geben, da Sie JS / DOM nicht zum Durchlaufen aller Elemente verwenden.
Ein anderer Ansatz wäre, Ihre Stile vorher festzulegen:
%Vor% Und bearbeite dann document.body.className
Verstecken Sie die Elemente, die Sie ändern möchten, bevor Sie sie ändern, nehmen Sie die Änderung vor und zeigen Sie sie dann erneut an. Dies ist üblich, um Dinge zu beschleunigen, wenn Sie die Repaint-Ereignisse im Ansichtsfenster minimieren. In diesem Fall, wenn Sie nur eine CSS-Eigenschaft festlegen, ist es vielleicht nicht von Vorteil, aber es ist einen Versuch wert, sage ich.
Versuchen Sie:
%Vor%oder
%Vor% Ich würde versuchen, eine CSS-Eigenschaft zu ändern, statt das DOM zu analysieren.
Hier geht es um die CSS-Engine vs. DOM + JS, und der Gewinner ist klar.
Es passiert, dass ich gerade eine kleine Bibliothek hochgeladen habe, die CSS durch Javascript ersetzt: jstyle
Dies ist möglicherweise ein Overkill, aber Sie finden im Quellcode von jstyle.js den gesamten Code, den Sie benötigen, um die CSS-Eigenschaften Ihrer Seite cross browser zu aktualisieren.
Ich denke, eine bessere Lösung wäre, eine spezifischere CSS-Regel zu schreiben (die die normale Farbe überschreiben würde), die durch einfaches Ändern der CSS-Klasse eines Elements aktiviert werden kann.
Also zum Beispiel, wenn Sie das folgende strukturelle Markup hatten:
%Vor%Und CSS: -
%Vor%Dann fügen Sie in Ihrer Abfrage die .newcolor-Klasse zum Container div hinzu: -
%Vor%Wenn Sie das tun, wird die zweite CSS-Regel die erste überschreiben, weil sie spezifischer ist.
Injizieren Sie den CSS-Code in ein style -Tag:
und bei jeder Farbänderung mit Farbauswahl schreiben Sie nur den HTML-Code innerhalb von #changeStyle tag um.
Haben Sie keine Ahnung, ob es funktioniert (nicht getestet), aber Sie sollten es versuchen.
Tags und Links javascript css canvas