javascript - Modifying CSS properties associated to a given CSS class using JavaScript

Question

I have a JavaScript color picker linked to a text input. I would like several colored elements on my to change their color on the update of that color input. I could create several classes, one for each color (blue, red, green, etc), but i would like to have the whole 24 bits coloe palette, not just a few of them. Is it possible to modify the value of the properties associated to a given CSS class ? If yes, will modifying these values apply new values on the rendered page in real time ? Thanks in advance :)

Answer 1

Totally possible, and yes it will be updated in real time.

Here is a function to do the class property update, tied to a mouseover event (requires jQuery 1.0+). Mousing over div with id myDiv will update the CSS background color to white for all div's with class myColorDivs:

$('#myDiv').mouseover(function() {

    $('.myColorDivs').css('background', '#fff');

});

Answer 2

Sorry, i'm late ... Had the same question some days before and didn't find a practical answer. Here's how I solved it for me (requires jquery):

Add an inline-stylesheet after all other stylesheets your page may need with the class you want to change. Assign a TITLE Attribute to this stylesheet!

<style title="tomrulez" type="text/css">
/*the stylesheet to change - Note the TITLE*/
.shaded{
    color:green;
}
</style>

Add this function:

    function modCSS (stylesheet, rule, attrib, newval){
    $.each( document.styleSheets, function( skey, svalue ) {
        if(svalue.title==stylesheet){
            $.each(svalue.cssRules,function (rkey,rvalue){
                if (rvalue.selectorText==rule){
                    rvalue.style[attrib]=newval;
                }
            });
        }
    });
  }

call it like this:

<div onclick="modCSS('tomrulez','.shaded','color','red')"> click here</div>

Parameters are:

• stylesheet -> the TITLE of the last stylesheet on your page
• rule -> The CSS-rule you want to change
• attrib -> The attribute of the rule you want the change
• newval -> The new value you want to assign to that attribute

I've tested this with Firefox, Chrome and IE10. IE may not work in older Versions. But I develop mainly backends for a small group of users that do not use IE if i tell them (Yep, i'm a lucky about that!)

Btw. Here is a Plunker that works for me: http://plnkr.co/edit/EMDpjU06U2p83Df8Lolq?p=preview