+2  A: 

There are different ways depending on which browser you are dealing with. This is documented on Quirks Mode.

Some libraries provide an abstraction layer, such as YUI's StyleSheet utility.

There should be a significant performance boost since you aren't using JS/DOM to cycle through all the elements.

Another approach would be to predefine your styles:

body.foo .myElements { … }

And then edit document.body.className

David Dorward
I'm changing color in CSS by color picker. Switching classes will not help.
Kuroki Kaze
I think I followed that Quirks Mode doc once and discovered that the technique crashed a version of IE6 I was testing on. Not a bad thing of course ;) but I'm just wondering if anyone else has seen that?
LeguRi
@Kuroki - Then use the first technique :) The classes option is a simple solution that better maintains separation of concerns if you have a small number of different cases.
David Dorward
I will try YUI utility.
Kuroki Kaze
Strange. YUI approach works, but it is also slow (testing in Chrome). I need to test other browsers.
Kuroki Kaze
use the YUI3 version.
The QuirksMode approach works -- I have used it.
Pete
A: 

I think a better solution would be to write a more specific CSS rule (that would override the normal colour) that can be activated by simply changing one element's css class.

So for example if you had the following structural markup:

<div id="container">
    <span class="colored">Test 1</span>
    <span class="colored">Test 2</span>
</div>

And CSS:-

.colored { background-color: red; }
.newcolor .colored { background-color: blue; }

Then in your jquery you add the .newcolor class to the container div:-

$('#container').addClass('.newcolor');

When you do that the second CSS rule will override the first because it is more specific.

U62
New css rule is created by JavaScript by getting RGB values from color picker.
Kuroki Kaze
Hmm, I think you might struggle to find a completely javascript solution to this. If this is because of some kind of user-preference setting thing, you might be better off allowing the user to select the colours on a more smaller page, then using a CGI/asp/whatever to generate a custom css file based on that rather than changing the page's colours via javascript.
U62
+1  A: 

If you can select the parent div by id, maybe you could select by tag inside it? Or are there elements of the same kind that should change color and that should not, inside the parent?

It would be nice to have an idea of what you're building here. 900+ objects seems to be a lot... maybe a completely different approach could be used? Canvas, SVG?

Adrian Schmidt
It's a kind of color scheme editor. Source is at http://github.com/kurokikaze/cinnabar/ . Files in question are index.html and css/style.css
Kuroki Kaze
I'm not expert in canvas nor SVG. I suppose I can do the same on canvas (show matrix of Unicode characters), but will it be faster?
Kuroki Kaze
I haven't used canvas myself yet, but when people think Javascript is slow, it's often the DOM that's slow, not JS. Canvas eliminates the DOM, so I'm guessing yes.Now, of course, the downside of canvas is browser compatibility. It's HTML5 after all...Have a look at http://html5demos.com/ for some simple canvas examples.
Adrian Schmidt
I need very basic stuff - array of symbols. I think this level is supported prettyt widely. Thanks, I will look into it.
Kuroki Kaze
Tried to do it with canvas - performance is still bad.
Kuroki Kaze
Linked to canvas code in question update.
Kuroki Kaze
Hmm... I downloaded your source, and both are pretty fast when I run them in FF3.6. The one using a canvas is smoother in its transitions, but the other one is quite acceptable to me.What browser(s) are you having trouble with?
Adrian Schmidt
Chrome 4.0.249.89 dev and Firefox 3.5.8. Lags are visible for me when trying to change light red color on HEAD or any color on canvas. Maybe this comp is so laggy? :)
Kuroki Kaze
I'll check it later on my home PC, which is much faster. If computer is the problem, you'll get the bounty :)
Kuroki Kaze
+1  A: 

I would stick in trying changing a CSS property, instead of parsing the DOM.
It is about the CSS engine vs. DOM+JS here, and the winner is clear.

It happens I just uploaded a tiny library that replaces CSS by Javascript: jstyle

This is may be an overkill, but you will find in the source code of jstyle.js all the code you need to update cross browser the CSS properties of your page.

Mic
+3  A: 

The most cross-browser friendly way to override a class definition is to write a new rule and add it to the end of the last stylesheet in the document. You can edit an existing style rule, but even some recent browsers can make it difficult.

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');

You can add as many 'property:value;' bits in the csstext as you need. Remember to prefix a '.' to a class name or a '#' to an id, and the css must be written as a style rule (with-hyphens, not camelCase).

Of course, it will not override inline styles, and it is overkill for small, local changes. It also may make the redrawing of the page more obvious than changing one element at a time, but it may be just what you need here.

kennebec
+1, this is a nice trick.
Mic
I think you mean "prefix '#' to id". Will try, thanks.
Kuroki Kaze
Hmm. Same speed.
Kuroki Kaze
+1  A: 

Try hiding the items you want to change before changing them, make the change and then display them again. This is common practice to speed up things as you minimize the repaint events in the viewport. In this case when you only setting one css property it might not be that of a benefit but it´s worth a try I say.

Try:

$('back_COLORED').hide();
$('back_COLORED').css('background-color', '#00FF00');
$('back_COLORED').show();

or

$('back_COLORED').hide().css('background-color', '#00FF00').show();
anddoutoi
I don't see much difference in speed.
Kuroki Kaze
A: 

Inject the css code into a style tag:

var style = $('style').attr({
    type:"text/css",
    media:"screen",
    id:'changeStyle'
}).html('.tempClass { color:red } .tempClass p { background:blue }').prependTo('body');

and on every changes on your color with color picker you only rewrite the html inside of #changeStyle tag.

Have no idea if it works (didn't tested) but you should give a try.

Ionut Staicu
A: 

This is jQuery pluggin for work with css rules: http://flesler.blogspot.com/2007/11/jqueryrule.html

not sure about its performance, but worth a try.

Kamarey