Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    get multiple elements by class

    The short of it is that I am trying to change the background color of all elements with a particular class name. I know there is no getElementsByClassName (wouldn't it be nice if there were?), but is there a simple way to do it?

    Alternatively, is there a way to apply changes to multiple id's?
    Edit/Delete Message

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Well:

    1) If you're trying to change the background color of all elements with a specific class, you can use JavaScript to modify the class itself: http://www.javascriptkit.com/domref/stylesheet.shtml

    2) Check out attribute crawler: http://neo.dzygn.com/demos/attributecrawler.php

  • #3
    New Coder
    Join Date
    Sep 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1. I am using a color picker to change the background color - so I don't think changing the style is a very viable option.

    2. I'm new to .js, so that attribute crawler is way over my head.


    But thank you for your time.

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    if you're using a color picker, what you do is use javascript to modify the rule for the class that defines the background color. I don't see any problems there.

    The attribute crawler is a script you put on your page that gives you the ability to call special functions like getElementsByClassName("class") it just does it in a round-about way so as to not suffer terrible speed problems, which you will run into inevitably. Go with option 1.

  • #5
    New Coder
    Join Date
    Sep 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for explaining all this to me.

    I think I am going to with changing the stylesheet rules. I'm still very fuzzy on how to this, but I'm trying to make sense of it.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Greg-J
    The short of it is that I am trying to change the background color of all elements with a particular class name. I know there is no getElementsByClassName (wouldn't it be nice if there were?), but is there a simple way to do it?

    Alternatively, is there a way to apply changes to multiple id's?
    Edit/Delete Message
    Code:
    ...
    var el = document.getElementsByTagName('*');
    for(var i=0;i<el.length;i++){
    el[i].className=='myClass'?el[i].style.backgroundColor='#ff0000':null;
    }
    ...
    Second problem? Well, id may not be multiple. id must be unique on the same page/session.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Regular Coder
    Join Date
    Mar 2004
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey,

    We discussed this to death on dhtmlcentral a few years back. I believe we decided that using == was bad because it doesn't work well with multiple classes.

    indexOf will not work with consistant reliability, either.

    There's two approaches that will work:
    1) split the className estring and loop through the array
    2) use regex.test(className);

    I just figured out a way to do it using Array.filter. If you're supporting IE, you'll have to add Array.filter. There's an example posted on my site.

    Garrett


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •