Navi's

Necessity, the mother of invention

  • Visitor Map

    Locations of Site Visitors
  • Flag Counter

    free counters

Modify Style css class value by Javascript

Posted by Navi's on March 26, 2010


Very critical problem like we have a table and it contains lots of rows  and we need to change the CSS (background color) for each row.

What are the possible solution for this:
Either traverse each rows of table and set CSS class or use jQuery for add CSS class

but above solutions takes too much performance issues.

For this problem I got an idea i.e. Modify applied Style CSS at run time.

So, we need to create same copy of CSS style which already applied on rows of table.
Suppose we applied .xyz class on each rows.

<tr class='xyz'> 

And in .xyz class is look like this .xyz{ background:red}
We will change this .xyz class at run time and set background: green

This terminology is called set Rules (IE) or CssRules(Netscape familly) for style sheet.

To detect browser use navigator.appName and compare this value with “Netscape” or “Microsoft Internet Explorer”

First put the style sheet block in head section.

Setting rules for IE:

var inStyleSheet = document.styleSheets["inStyleSheetBlock"];

//Add rule
 if (inStyleSheet.rules.length == 0) {
inStyleSheet.addRule("tr .xyz", "background-color: green");
inStyleSheet.addRule("tr .xyz", "background-color: green");
}

//Remove rule
for (i = 0; i < inStyleSheet.rules.length; i++) {
                        inStyleSheet.removeRule()
                    }

To remove all rules from page we need to make a recursive call, because its not removing all applied rule at once. So we have to call removeRule till it will remove all created rules.

To get the how many rules at present in a page we can use rules.length property. It will return the count of rules in named style block.

 if (inlineStyleSheet.rules.length != 0)
            for (i = 0; i < inStyleSheet.rules.length; i++) {
                        inStyleSheet.removeRule()
                    }

Set rules for Netscape family [ Firefox ] :

var inStyleSheet = document.getElementById('inStyleSheetBlock').sheet;

//Add rule
inStyleSheet.insertRule("tr .xyz {background-color: green}", 0);
inStyleSheet.insertRule("tr .xyz {background-color: green}", 1);

//Remove rule

for (i = 0; i < inStyleSheet.cssRules.length; i++) {
                        inStyleSheet.deleteRule(i)
                    }

Same recursive steps applied here to remove rule.

if (inlineStyleSheet.cssRules.length != 0)
     for (i = 0; i < inStyleSheet.cssRules.length; i++) {
                        inStyleSheet.deleteRule(i)
                    }

Perform add and delete rules based on your condition.

References :
http://bit.ly/cCtKQY
http://bit.ly/cTBDIO
http://bit.ly/9IGBRk
http://bit.ly/40NVsg

-n’s

11 Responses to “Modify Style css class value by Javascript”

  1. thanks for useful posting, keep writing. btw your blog theme very cool… I like the color😉

  2. Thanks for the writing this! I’m new at this game so am trying to catch up.

  3. A useful guide

  4. I don’t have.

  5. CML Retail said

    CML Retail…

    Great post its was a terriffic read thanks for the share !…

  6. Facebook Marketing…

    Thanks for the great information it was a great read !…

  7. Marketing On The Internet…

    Good stuff it was a great read thanks for the insight !…

  8. CML Pro Sports…

    This was an intresting thread thanks for the information !…

  9. Howdy I am so excited I found your blog, I really found you by error, while I was looking on Google
    for something else, Regardless I am here now and would just
    like to say thanks for a fantastic post and a all round thrilling blog (I also love the theme/design), I don’t have time to go through it all at the minute but I have book-marked it and also added in your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the superb job.

  10. I read this post completely regarding the resemblance of most up-to-date and preceding technologies, it’s amazing article.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: