Je veux changer de fond de fond / de premier plan de nombreux symboles avec la même classe CSS. En ce moment je le fais avec jQuery - comme semble que c'est parce que JQuery ne change pas les règles de CSS lui-même, mais trouve tous les éléments uniques et applique des styles en ligne. Au moins, c'est ce que je vois dans l'inspecteur. Donc, la question est la suivante:
upd : J'essaie de faire une sorte d'éditeur de jeu de couleurs. La source est chez http://github.com/kurokikaze/cinnabar/ . Ne vous dérange pas des choses PHP, l'éditeur est totalement client (avec quelques bibliothèques extraites du filet).
$ ("back_colored '). CSS (" Color de fond ",' # 00FF00 ') , mais cette approche est lente Quand il y a beaucoup d'éléments avec une telle classe (> 900).
8 Réponses :
Il existe différentes manières selon lesquelles le navigateur vous traitez. C'est documenté sur le mode Qiiks .
Certaines bibliothèques fournissent une couche d'abstraction, telle comme utilitaire de stylesheet de Yui .
Il devrait y avoir une performance significative. Puisque vous n'utilisez pas JS / DOM pour parcourir tous les éléments.
Une autre approche serait de prédéfinir vos styles: puis modifier document.body.classname
Je change de couleur dans CSS par cueilleur de couleurs. Les classes de commutation ne vous aideront pas.
Je pense que j'ai suivi cette autrefois que la technique de la technique a écrasé une version de IE6, je me suis testée. Pas une mauvaise chose bien sûr;) Mais je me demande simplement si quelqu'un d'autre l'a vu?
@Kuroki - utilisez ensuite la première technique :) L'option Classes est une solution simple qui maintient mieux la séparation des préoccupations si vous avez un petit nombre de cas différents.
Étrange. L'approche YUI fonctionne, mais il est également lent (test en chrome). J'ai besoin de tester d'autres navigateurs.
Je pense qu'une meilleure solution serait d'écrire une règle de CSS plus spécifique (qui remplacerait la couleur normale) pouvant être activée en modifiant simplement la classe CSS d'un élément.
Ainsi, par exemple si vous aviez le marquage structurel suivant : et css: - puis dans votre jQuery, vous ajoutez la classe .NewColor au conteneur DIV: - Lorsque vous faites que la deuxième règle CSS remplacera le premier parce qu'il est plus spécifique.
La nouvelle règle CSS est créée par JavaScript en obtenant des valeurs RVB à partir du sélecteur de couleur.
Hmm, je pense que vous pourriez avoir du mal à trouver une solution complètement javascript à cela. Si cela est dû à une chose de paramétrage de préférence de l'utilisateur, vous risquez peut-être mieux de permettre à l'utilisateur de sélectionner les couleurs sur une page plus petite, puis de l'utilisation d'une CGI / ASP / Peu importe de générer un fichier CSS personnalisé en fonction de cela. que de modifier les couleurs de la page via JavaScript.
Si vous pouvez sélectionner le parent div par ID, vous pouvez peut-être sélectionner par balise à l'intérieur? Ou y a-t-il des éléments du même genre qui devraient changer de couleur et qui ne devrait pas, à l'intérieur du parent?
Ce serait bien d'avoir une idée de ce que vous construisez ici. 900+ objets semblent être beaucoup ... peut-être une approche complètement différente pourrait être utilisée? Canvas, SVG?
C'est une sorte d'éditeur de jeu de couleurs. Source est chez Github.com/kurokikaze/cinnabar . Les fichiers en question sont index.html et css / style.css
Je ne suis pas expert en toile ni SVG. Je suppose que je peux faire la même chose sur toile (montrer la matrice de caractères Unicode), mais sera-t-il plus rapide?
Je n'ai pas encore utilisé de toile moi-même, mais quand les gens pensent que JavaScript est lent, c'est souvent le Dom qui est lent, pas JS. La toile élimine le DOM, donc je devine oui. Maintenant, bien sûr, l'inconvénient de la toile est la compatibilité du navigateur. C'est HTML5 après tout ... regardez HTML5DEMOS.com pour certains exemples de toile simples.
J'ai besoin de trucs très basiques - Tableau de symboles. Je pense que ce niveau est pris en charge assez largement. Merci, je vais y regarder.
Hmm ... J'ai téléchargé votre source, et les deux sont assez rapides quand je les exécute à FF3.6. Celui utilisant une toile est plus lisse dans ses transitions, mais l'autre est tout à fait acceptable pour moi. Quel navigateur (s) avez-vous des problèmes?
Chrome 4.0.249.89 dev et firefox 3.5.8. Les retards sont visibles pour moi lorsque vous essayez de changer la couleur rouge légère sur la tête ou toute couleur sur toile. Peut-être que cette Comp est tellement laggy? :)
Je vérifierai plus tard sur mon PC à la maison, ce qui est beaucoup plus rapide. Si l'ordinateur est le problème, vous obtiendrez la prime :)
Je voudrais essayer de changer de propriété CSS, au lieu de analyser le DOM.
Il s'agit du moteur CSS vs. Dom + JS ici, et le gagnant est clair.
Il arrive que je viens de télécharger une petite bibliothèque qui remplace CSS par JavaScript: Jstyle
Ceci est peut-être un overkill, mais vous trouverez dans le code source de jstyle.js tout le code dont vous avez besoin pour mettre à jour le navigateur croiseur Les propriétés CSS de votre page.
Le moyen cross-navigateur convivial de remplacer une définition de classe est d'écrire une nouvelle règle et de l'ajouter à la fin de la dernière feuille de style dans le document. Vous function newRule(selector, csstext){
var SS= document.styleSheets, S= SS[SS.length-1];
// this example assumes at least one style or link element
if(S.rules){
S.addRule(selector,csstext,S.rules.length);
}
else if(S.cssRules){
S.insertRule(selector+'{'+csstext+'}'),S.cssRules.length)
}
}
newRule('.someclass','background-color:#0f0');
Essayez de cacher les éléments que vous souhaitez modifier avant de les modifier, de faire la modification, puis de les afficher à nouveau. Ceci est une pratique courante pour accélérer les choses que vous minimisez les événements repeints dans la fenêtre. Dans ce cas, lorsque vous ne définissez qu'une propriété CSS, il pourrait ne pas être celui d'un avantage, mais cela vaut la peine d'essayer, je dis.
Essayez: p>
$('back_COLORED').hide().css('background-color', '#00FF00').show();
Je ne vois pas beaucoup de différence de vitesse.
injecter le code CSS dans une balise style xxx
et sur chaque modification de votre couleur avec le sélecteur de couleur, vous ne réécrivez que le code HTML de n'a aucune idée si cela fonctionne (n'a pas été testé) mais que vous devriez essayer. #changtestyle tag.
Ceci est JQuery Puggin pour le travail avec les règles CSS: http: //flesler.blogspot .COM / 2007/11 / JQueryRule.html
Pas sûr de ses performances, mais vaut la peine d'essayer.
Je n'ai pas de réponse directe à votre question CSS, mais la sélection de l'ID ou de la balise est considérée comme beaucoup plus rapidement que la sélection du nom de la classe CSS, alors peut-être que c'est une avenue que vous pourriez explorer pour améliorer les performances.
J'ai essayé de retenir une recherche un peu en sélectionnant le parent div par ID. Cela aide un litte, mais la vitesse est encore faible. Je ne sais pas comment je peux utiliser différents identifiants ou même des tags pour cela au lieu de classes.