Home/ Questions/Q 145187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T08:22:44+00:00

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

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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

    • 0