How can I change the css class rules using jQuery?

JqueryCss

Jquery Problem Overview

Can any one help me please, I have two sections of my question.

  1. What I want to do is changing css class rules using jQuery on the fly. 

    .classname{color:red; font-size:14px;}
    In example above I have a class named .classname now using jQuery I want to change the font size only not color with in .classname not by adding css inline.

  2. I want to create and save .classname change to a file remember there will be complete stylesheet or no of classnames that will be save in file.

How I can do this the easiest and better way?

Thanks!

Jquery Solutions

Solution 1 - Jquery

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
http://www.w3.org/TR/html4/strict.dtd">

<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

Solution 2 - Jquery

Recently I had the need to fix some jquery theme issue for Autocomplete widget. I wanted to change the background color of the autocomplete widget.

So I looked up the CSS and found that the autocomplete class is defined like this

.ui-autocomplete { position: absolute; cursor: default; }

So in my program I issue the following statement to change the class by adding the background property. Note that I keep the other attributes as it is otherwise it will break existing functionality

$("<style type='text/css'> .ui-autocomplete { position: absolute; cursor: default; background:black; color:white} </style>").appendTo("head");

Solution 3 - Jquery

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

Solution 4 - Jquery

If I understand your question correctly, you would like to read through a CSS file, make changes to a class and then persist those changes by saving the file?

You can't do this with JavaScript/jQuery running from the client side; You can certainly change the font size of each individual element in the DOM that matches the CSS class .classname, 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 the CSS file itself.

Solution 5 - Jquery

You can also try JSS, it's worked wonderfully for me: https://github.com/Box9/jss > Download and include jss.js in your HTML: > > > > Add new rule (or extend existing rule): > > jss('.special', { > color: 'red', > fontSize: '2em', > padding: '10px' > }); > > Retrieve existing rule: > > jss('.special').get(); > > Returns: > > { > 'color': 'red', > 'font-size': '2em', > 'padding-bottom': '10px', > 'padding-left': '10px', > 'padding-right': '10px', > 'padding-top': '10px' > } > > Remove existing rule: > > jss('.special').remove();

Solution 6 - Jquery

the DOM Level 2 lets manipulate directly the css rules of a stylesheet. ex :

var ss = document.styleSheets[1];  // ref to the first stylesheet
ss.cssRules[0].style.backgroundColor="blue";  // modification of the 1rst rule

There are 2 interfaces :

That make it possible to active/inactivate a stylesheet, remove a rule, add a rule etc... All the details here in MDM : Using_dynamic_styling_information

Solution 7 - Jquery

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.

Solution 8 - Jquery

On a semi-related note, also see my answer about changing LESS variables which will result in updated CSS rules. Depending on your case that may be more useful since a single LESS variable can drive a lot of CSS rules.... https://stackoverflow.com/a/9491074/255961

Solution 9 - Jquery

not sure about changing the class properties I came here looking for an answer to that myself and seems there are a few answers for that already, as for saving you could use jquery $.post method to send a form containing changes or $.get with url encoded values to then write to the new css file using PHP fwrite, or file_put_contents. make sure you restrict access to this feature or ensure values meet a certain criteria before storing any data.

Solution 10 - Jquery

For the first part, I usually specify a style block and switch it on/off with jQuery. For example:

<style type="text/css" id="my-style" media="all">
    .classname{color:red; font-size:14px;}
</style>

Then you can to the switching by setting the disabled attribute, such as:

$('#my-style').prop('disabled', true);
$('#my-style').prop('disabled', false);

Solution 11 - Jquery

You can use YUI Stylesheet Utility.

http://yuilibrary.com/yui/docs/stylesheet/

It works grate!

Solution 12 - Jquery

As styles applied to the head section 'overload' each other, their late append() with styles for all relevant elements will be used, unless there was !important involved earlier.

The function used for assigning the css-content should be text() not html() to prevent accidental injections of code

var dynamic_css = function(class_name){
  return '.' + class_name + ' {color:red; font-size:14px;}';
}
var styles = $('<style type="text/css">');
styles.text(dynamic_css('my_classname'));
$('html head').append(styles);

later:

styles.remove();

it also works well to assign a class to the styles element to identify it later

Solution 13 - Jquery

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.

Solution 14 - Jquery

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

Categories
Recommended Jquery Solutions
Recommended Css Solutions

Previous Solution:

A tool like ReSharper, but for Java?

JavaResharper

Next Solution:

text-align:center won't work with form <label> tag (?)

HtmlCss

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionYasirView Question on Stackoverflow
Solution 1 - JqueryIonuț G. StanView Answer on Stackoverflow
Solution 2 - JqueryNileshView Answer on Stackoverflow
Solution 3 - JqueryBlagoView Answer on Stackoverflow
Solution 4 - JqueryRuss CamView Answer on Stackoverflow
Solution 5 - JqueryVlad SabevView Answer on Stackoverflow
Solution 6 - JqueryBeniburView Answer on Stackoverflow
Solution 7 - JquerylpfavreauView Answer on Stackoverflow
Solution 8 - JquerystudgeekView Answer on Stackoverflow
Solution 9 - Jqueryuser511941View Answer on Stackoverflow
Solution 10 - JqueryViliamView Answer on Stackoverflow
Solution 11 - JqueryRoy ShoaView Answer on Stackoverflow
Solution 12 - JqueryNei3maj6Xeerax7AnaedaezeequaegView Answer on Stackoverflow
Solution 13 - JqueryScott EverndenView Answer on Stackoverflow
Solution 14 - JqueryShaulianView Answer on Stackoverflow