stackoom
  简体   繁体   中英

How can I change the css class rules using jQuery?

 原文  2009-03-07 16:52:55  6   14    jquery/ css

Question

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!

14 answers

solution1
 54 ACCPTED  2009-03-07 17:35:46

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">

<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

solution2
 17  2011-10-18 16:00:50

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

solution3
 13  2009-12-01 16:58:12

You should take this approach only if:

  • You need to set the value to something that is impractical to enumerate (ie 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);
    }
}

solution4
 12  2009-03-07 17:01:40

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 (ie server-side code) to make changes to the CSS file itself.

solution5
 6  2012-07-14 19:11:21

You can also try JSS, it's worked wonderfully for me: https://github.com/Box9/jss

Download and include jss.js in your HTML:

 <script type="text/javascript" src="jss.js"></script>

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

solution6
 2  2012-05-21 08:38:16

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

solution7
 1  2009-03-07 18:19:55

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.

solution8
 0  2013-04-12 21:51:35

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

solution9
 0  2014-11-06 08:00:05

You can use YUI Stylesheet Utility.

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

It works grate!

solution10
 0  2014-11-11 21:26:10

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

solution11
 0  2012-03-04 23:41:46

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

solution12
 0  2012-03-07 09:15:28

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.

solution13
 -1  2010-02-18 10:34:55

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

solution14
 -1  2009-03-07 17:34:41

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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I change a css style for 'this' class using jquery? How can i change the css class based on keywords in url with jquery Using jquery how can I change an href value of an element with a certain CSS class? How can I define a set of CSS rules that can be added as class using JavaScript? how can I change the background color of slider using jquery or css How to change class CSS using jquery How to change Css class using JQuery? How can i change the value of data-rules-required using jQuery How can I change webkit css with jquery How can I add a CSS class to the existing CSS class in jQuery?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM