Organizational Research By

Surprising Reserch Topic

how can i change the css class rules using jquery


how can i change the css class rules using jquery  using -'jquery,css'

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


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.
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!
    
asked Oct 6, 2015 by rajnipancholi
0 votes
12 views



Related Hot Questions



Government Jobs Opening

Some red text

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

answered Oct 6, 2015 by atulpariharmca
0 votes

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

$("").appendTo("head");
answered Oct 6, 2015 by shikhar jain
0 votes

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);
    }
}
answered Oct 6, 2015 by dhananjayksharma
0 votes

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.

answered Oct 6, 2015 by tejas lakhani
0 votes

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();
answered Oct 6, 2015 by sandeep bhadauria
0 votes

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

answered Oct 6, 2015 by gauravg.gwl
0 votes

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.... a/9491074/255961

answered Oct 6, 2015 by vickeykumar66
0 votes

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.

answered Oct 6, 2015 by rajesh
0 votes

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


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

$('#my-style').prop('disabled', true);
$('#my-style').prop('disabled', false);
answered Oct 6, 2015 by yogeshplv
0 votes

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 = $('