By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
439,971 Members | 1,467 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 439,971 IT Pros & Developers. It's quick & easy.

get elements by class name and change its style?

P: 20
Hello,

Here's the challenge I'm trying to solve:

I'd like, when I click a button on a page, that it causes the style for all elements of a certain class to change. When I click the button again, it should change back. Using getElementsById would be inefficient because I don't want to assign a specific ID to every single element on my page. Here's a simplified example:

[HTML]
<p class="normal">Here is some text that will not change</p>
<p class="changeable">This is text that will be changed</p>
<p class="normal">More text that won't change</p>
<p class="changeable">More text that will be changed</p>
<p class="normal">Again, more unchanging text</p>
<p class="changeable">More text that will be changed</p>
<a href="#" onclick="function to change the style of the p class changeable">
[/HTML]

Any suggestions?

Thanks!
Oct 24 '07 #1
Share this Question
Share on Google+
4 Replies


P: 20
I've found a script that works in Firefox and Safari, but not in IE. Here is the example html and the javascript; I would really appreciate anyone being able to point out what prevents this from working in IE:

Expand|Select|Wrap|Line Numbers
  1. function changeStyles()
  2. {
  3.    var ss = document.styleSheets;
  4.    for (i=0;i<ss[0].cssRules.length;i++)
  5.    {
  6.      if (  ss[0].cssRules[i].selectorText.indexOf(".changeable") > -1 )
  7.      {
  8.        ss[0].deleteRule(i);
  9.        ss[0].insertRule(".changeable { color: red; }", i);
  10.      }
  11.    }
  12. }
  13.  
  14.  
[HTML]
<p class="normal">Here is some text that will not change</p>
<p class="changeable">This is text that will be changed</p>
<p class="normal">More text that won't change</p>
<p class="changeable">More text that will be changed</p>
<p class="normal">Again, more unchanging text</p>
<p class="changeable">More text that will be changed</p>
<a href="#" onclick="function to change the style of the p class changeable">Click</a>
[/HTML]

(credit - script found at http://lists.evolt.org/archive/Week-of-Mon-20021021/125486.html)
Oct 24 '07 #2

iam_clint
Expert 100+
P: 1,208
to make a workaround for all browsers you would want to do something like
Expand|Select|Wrap|Line Numbers
  1. elements = "A, P, FONT, DIV, SPAN";
  2. elements = elements.split(",");
  3. for (i=0; i<elements.length; i++) {
  4.  curElements =  document.getElementsByTagName(elements[i]);
  5.  for (c=0; c<curElements.length; c++) {
  6.  document.getElementsByTagName(elements[i])[c].className='blah';
  7.  }
  8. }
  9.  
^^^ above code may not be fully functional because i just typed it up without testing it but you should get the idea

This method would use2 different classes where u just change the class instead of the styles in the class
Oct 24 '07 #3

100+
P: 428
IE uses the methods addRule and removeRule instead of the standard insert and delete- and the arguments you need to supply are also different from the standard.
Oct 24 '07 #4

P: 20
Thank you for your replies. After some more digging around, I came across a code that would do what I needed (i.e. I emailed the person who posted the original script I found halfway worked). Here is the script that works in Firefox, Safari for Windows, IE6 and IE7:

Expand|Select|Wrap|Line Numbers
  1. function changeStyles()
  2. {
  3.    var ie = false;
  4.    var ss = document.styleSheets;
  5.    if ( ss[0].rules )  {  ie = true; ss[0].cssRules = ss[0].rules;  }
  6.    for (i=0;i<ss[0].cssRules.length;i++)
  7.    {
  8.      if (  ss[0].cssRules[i].selectorText.indexOf(".changeable") > -1 )
  9.      {
  10.        if ( ie )
  11.        {
  12.          ss[0].removeRule(i); // this is a little iffy -- it assumes
  13.                               // that the "rules" collection that I
  14.                               // copied into "cssRules" was stored,
  15.                               // and is being returned, in the same
  16.                               // order.  Seems to work, but... :-)
  17.          ss[0].addRule(".changeable","color: red;", i);
  18.        }
  19.        else
  20.        {
  21.          ss[0].deleteRule(i);
  22.          ss[0].insertRule(".changeable { color: red; }", i);
  23.        }
  24.      }
  25.    }
  26. }
  27.  
(Credit - Hassan Schroeder, webtuitive.com)
Oct 26 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.