ansaurus

Question

How can I change the css class rules using jQuery?

Answer 1

+4 A:

Essentially, you would like to read through a CSS file, make changes to a class and then persist those changes by saving the file?

I don't believe that you'll be able to do this with pure JavaScript/jQuery alone. You can certainly change the font size of the class .classname at runtime, like so

$('.classname').css('font-size','14px');

but client-side JavaScript cannot access the filesystem from the web browser, so you would need some other way (i.e. server-side code) to make changes to your CSS file.

Russ Cam 2009-03-07 17:01:40

Answer 2

A:

I am pretty sure you can't change the rules inside an existing style. Even firebug won't let you do this. You can style an element or set of elements, you can assign and unassign classes, but I don't think you can alter existing classes. In order to do what you are asking you will need to maintain some sort of associative array that records proposed changes to existing classes and then to save those changes you will need to upload to a server that can then offer a link for download to the client.

Scott Evernden 2009-03-07 17:34:41

Answer 3

+6 A:

As far as I know there's no jQuery way to do this. There might be some jQuery plugin for this but I don't know.

Basically, what you're trying to achieve in your first question is possible using the styleSheets property of the document object. It's a little bit more complicated than that as you need to walk to a rather deep object chain, but nevertheless works in all major browsers including Internet Explorer 6. Below is a proof of concept. The CSS is inside a STYLE tag, but works with external CSS just as well. I'll let you do the abstractions.

Proof of Concept

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
.classname {
 color: red;
 font-size: 14px;
}
</style>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("button").onclick = function() {
        var ss = document.styleSheets;

        for (var i=0; i<ss.length; i++) {
            var rules = ss[i].cssRules || ss[i].rules;

            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === ".classname") {
                    rules[j].style.color = "green";
                }
            }
        }
    };
}
</script>
</head>
<body>

<h1 class="classname">Some red text</h1>

<button id="button">Make text green</button>

</body>
</html>

For your second question, I don't have time to write a solution but it would involve reading the CSS declarations just as above and use the cssText property of a CssRule object in order to build a string which will eventually be sent to the server using a Ajax POST request. The server side is your business.

References:

Hope it helps

Ionuț G. Stan 2009-03-07 17:35:46

Thanks lonut G.Stan how good you are i never used document.styleSheets even don't that kind of things exist :S. actually i want to do that kind of work http://www.coolchaser.com/layout/create or http://www.realeditor.com/editor/ can you please tell me concept how they are doing PLEASE.

Yasir 2009-03-07 18:06:14

I don't understand why do you have to add new rule to all style sheets ? Why not add it only to last one or add new stylesheet ?

alpav 2010-02-19 20:53:46

@alpav, oh, it's a bug :) I don't remember how it slipped through my eyes.

Ionuț G. Stan 2010-02-20 01:01:50

What is interesting is that I see that bug in jQuery.cssRule plugin too (see my [question](http://stackoverflow.com/questions/2300084/why-does-jquery-cssrule-plugin-have-to-add-rules-to-all-style-sheets)), so I wonder if it's a bug (you guys took it from the same place wherever it is) or necessity for something that I am not aware of.

alpav 2010-02-22 14:11:57

My above example is conceived by me from the documentation pages I have linked to, and I think I remember why I did like this. I'm not just adding a new rule, I'm adding a new rule to an existing declaration. So I had to look up every stylesheet in order to find that declaration. Now, the best optimization that I can come up with right now, is to read the `styleSheets` in reverse order, and break the loop after the first encounter of that `selectorText`. This way, you modify just one stylesheet, the one with the highest precedence.

Ionuț G. Stan 2010-02-22 17:53:59

Answer 4

+3 A:

What you are looking to do is done by having a couple of themes on the server (theme1.css, theme2.css, theme3.css, etc.) and letting the user select the theme he likes. You can then save in the database with the user profile the theme the user chose (theme2.css). When the user then displays his page, you include at the top of the page the theme2.css instead of the theme default.css.

This would work well with server side technology such as PHP or ASP.NET or whatever you like. Of course, you could potentially use javascript to save a cookie on the user computer to remember his choice and use javascript again to include the file that you remembered via the cookie.

If you want to let the user manage exactly what applies to specific elements of the design (such as the color of the header, the font, etc.) you could again, using a server-side technology (better in this case in my opinion) or javascript save things like header=blue, font=Arial and using jQuery apply what was stored to your page.

Hope it gives you an overview.

lpfavreau 2009-03-07 18:19:55

Thanks ipfavreau got the first point loading different css but it will be predefined. http://www.coolchaser.com/layout/create want to do this type of stuff or same changing myspace theme. i have to save all the classes name in db and attributes ? send changes n retrieve than change interface ?

Yasir 2009-03-07 18:31:11

If you don't mind the changes not persisting forever, you can save the changes in a cookie using only javascript, but as I was saying, it'll probably do a better job in a database yes. And you could yes save all attributes in the DB and then display them back, even without reloading using AJAX.

lpfavreau 2009-03-07 18:49:22

great Thanks dude, i will make the database tables having all classes names as table and attributes where i can update class rules too. am i write ?

Yasir 2009-03-07 19:33:35

Well, answering about your architecture in a simple comment might be out of the scope of this answer, you'll probably want to ask another question more focused on that specific implementation, but basically, yes, you'll want a table that links a user, an attribute and the chosen value.

lpfavreau 2009-03-07 19:53:16

Answer 5

+4 A:

You should take this approach only if:

You need to set the value to something that is impractical to enumerate (i.e. varying width in pixels) with class names
And you want to apply this style to elements that will be inserted in the DOM in the future

There is a jQuery plugin that does that: http://plugins.jquery.com/project/jquerycssrule

For a small project I worked on I extracted the bare essentials and created the following function:

function addCSSRule(sel, prop, val) {
    for(var i = 0; i < document.styleSheets.length; i++){
        var ss    = document.styleSheets[i];
        var rules = (ss.cssRules || ss.rules);
        var lsel  = sel.toLowerCase();

        for(var i2 = 0, len = rules.length; i2 < len; i2++){
            if(rules[i2].selectorText && (rules[i2].selectorText.toLowerCase() == lsel)){
                if(val != null){
                    rules[i2].style[prop] = val;
                    return;
                }
                else{
                    if(ss.deleteRule){
                        ss.deleteRule(i2);
                    }
                    else if(ss.removeRule){
                        ss.removeRule(i2);
                    }
                    else{
                        rules[i2].style.cssText = '';
                    }
                }
            }
        }
    }

    var ss = document.styleSheets[0] || {};
    if(ss.insertRule) {
        var rules = (ss.cssRules || ss.rules);
        ss.insertRule(sel + '{ ' + prop + ':' + val + '; }', rules.length);
    }
    else if(ss.addRule){
        ss.addRule(sel, prop + ':' + val + ';', 0);
    }
}

Blago 2009-12-01 16:58:12

Answer 6

A:

I used the addClass of jquery : http://api.jquery.com/addClass/ and then set the class as the attributes i want to change.

Shaulian 2010-02-18 10:34:55

Answer 7

A:

hello guys thank you very much for your responses stackoverflow rocks you get different answers to your question so you got different way to do your task its great.

i have completed my application what i did i created a databse and tables for different section and added the fields with class names.

so on runtime i change the css using jquery and also send request to server that udpate my table so styles are saved. once theme is created i can generated the style accordingly.

Thanks a lot again guys.

Yasir 2010-02-23 10:15:12

ansaurus

tags:

views:

answers:

How can I change the css class rules using jQuery?

Proof of Concept

related questions