www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: Get all elements by id or tags

Hybrid View

  1. #1
    Join Date
    Dec 2010
    Location
    UK
    Posts
    12

    Post Get all elements by id or tags

    Hi,

    I have a function to change the color of different elements on the page.

    function updateElement(color,id) {
    document.getElementById(id).style.backgroundColor = '#'+color;

    }

    The problem is, is how do I make it so the function doesn't only apply the new colour to the first occurance of that element.

    eg. i have 4 boxes (div's) with id="box" so i want to change the background of all 4 boxes

    Thanks.
    nmyster

  2. #2
    Join Date
    Dec 2010
    Posts
    63

    one way

    document.getElementsByTagName("div");

    Then just go through your array and change the color of each div.

  3. #3
    Join Date
    Dec 2010
    Posts
    63
    function updateElement(color) {
    var allDivs = document.getElementsByTagName("div");
    for (i=0;i<allDivs.length;i++) {
    allDivs[i].style.backgroundColor = '#'+color;
    }

    }

  4. #4
    Join Date
    Dec 2010
    Location
    UK
    Posts
    12

    Thumbs up This works... but

    Thanks for the quick reply. This works,

    However, I want this to work with id's aswell because I am using a function to change different parts of the page... basically, i need to be able to do the same with id's?

    Any suggestions?

    Thanks
    nmyster

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by nmyster View Post

    eg. i have 4 boxes (div's) with id="box" so i want to change the background of all 4 boxes
    You can't. It is HTML CSS and JavaScript illegal. You can not have more than a single element with the same id on the same document. The id must be unique

    You may give them a common class. Or a common custom attribute, in order to separate them from the other elements. But probably it would be simpler to give them indented ids. Like "box1", "box2", "box3",..."boxn"

    Now, the code is simple
    Code:
    function updateElement(color) {
    var i=1,d;
    while(d=document.getElementById('box'+(i++))){
    d.style.backgroundColor = '#'+color;
    }
    }

  6. #6
    Join Date
    Dec 2010
    Posts
    63

    Thumbs up

    very cool code.

  7. #7
    Join Date
    Dec 2010
    Location
    UK
    Posts
    12
    Hmm okay, Thanks so much for help guys

    I'll have a play around. You see, what I am getting at, is I have a page that lets you edit the colours on the fly, the issue is that I have a navigation menu that displays the links as a block, I allow for the colour to be changed BUT i dont want that to affect all links on the page.. so yeah.

    Can I child elements, ie, only the links in the div with class or id menu

    Thanks
    Neil

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Another solution is to write a common custom attribute. make sure the name your custom attribute is not the same as any native one or as a javascript reserved word. Let's say: tobecolored. If so:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function updateElement(color) {
    var allDivs=document.getElementsByTagName('div'), i=0,d;
    while(d=allDivs[i++]){
    	if(d.getAttributeNode('tobecolored')){
    	d.style.backgroundColor = '#'+color
    	}
    }
    }
    onload=function(){updateElement('ff0000')}
    </script>
    </head>
    <body>
    <div>1</div>
    <div tobecolored="yes">2</div>
    <div tobecolored="yes">3</div>
    <div>4</div>
    </div>
    </body>
    </html>

  9. #9
    Join Date
    Dec 2010
    Location
    UK
    Posts
    12
    Kor,

    This works! Again, thanks so much!

    Its quite cool what I'm trying to make (I think so anyway) I have a template, with a js colour picker script, this then lets you pick colours for different elements on the page.

    When I get all the elements working, I will then make it so when You press "Generate" it will make create a html file (using php) and maybe a css file.. not to sure yet.

    So yeah, thanks for the help

  10. #10
    Join Date
    Jan 2009
    Posts
    3,346
    It might also be easier to think about it in a slightly different way. You could alter a css class very easily that could target the specific areas you are wanting to affect. Another option is to first select your navigation containing element and then looping through the child elements and making the changes that way.

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by nmyster View Post
    Kor,
    Its quite cool what I'm trying to make (I think so anyway) I have a template, with a js color picker script
    Here's a simple color palette & color picker I have created some years ago. Just for fun. Maybe it will be of some help in your project.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Color picker</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    //Color picker
    //For safe (216) web colors
    //Genuine code 2006 by Corneliu Lucian "Kor" Rusu corneliulucian[at]gmail[dot].com
    onload = function(){
    var cel = document.getElementById('tab').getElementsByTagName('td');
    var R=0;var G=0;var B=0;
    for(var i=0;i<cel.length;i++){
    cel[i].style.backgroundColor='rgb('+R+','+G+','+B+')';
    cel[i].r=(R!=0)?R.toString(16):R.toString(16)+R.toString(16);
    cel[i].g=(G!=0)?G.toString(16):G.toString(16)+G.toString(16);
    cel[i].b=(B!=0)?B.toString(16):B.toString(16)+B.toString(16);
    cel[i].onclick=function(){
    document.getElementById('inp').value='#'+this.r+this.g+this.b;
    //optional, the below line sets the document's background color as well
    document.getElementsByTagName('body')[0].style.backgroundColor='#'+this.r+this.g+this.b;
    }
    G+=51;if(G>255){G=0;R+=51;if(R>255){R=0;B+=51;}}}
    }
    </script>
    </head>
    <body>
    <table id="tab" width="363" border="1" cellpadding="0" cellspacing="1" bordercolor="#666633">
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    <br>
    <br>
    <input id="inp" type="text">
    </body>
    </html>
    Last edited by Kor; 01-12-2011 at 09:20 AM.

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Take care when handling the CSS colors in JavaScript, Some browsers will return the color in RGB format, even if you have explicit set it as HEXA.
    Take for instance:
    Code:
    <div style="color:#ff0000" onclick="alert(this.style.color)">foo</div>
    IE and Opera will return the value as it is written, in HEXA. But FireFox and Chrome will return the RGB equivalent value!

    So probably you should use the RGB values all over:
    Code:
    <div style="color:rgb(255,0,0)" onclick="alert(this.style.color)">foo</div>

  13. #13
    Join Date
    Dec 2010
    Location
    UK
    Posts
    12
    Hi,

    The colour picker I am using works fine, thanks though

    The code you sent, the while loop, I tried alterting so I could reuse with different tags,nodes etc...


    Here is what I have:

    Link Color: <input class="color" name="bgColor" onchange="updateElement(this.color.toString(),'link','color','a')" value"000000"/>

    - This takes the colour code from the colour picker (which works, and is not the problem), I have then add the parameter -
    link: the custom attribute to use.
    color: what i want to change (i could put that or backgroundColor for example)
    a: the tag I want to change...

    Then the function with alterations:

    Code:
    function updateElement(color,node,change,tag) {
    var allDivs=document.getElementsByTagName(tag), i=0,d;
    
    while(d=allDivs[i++])
    {
    	if(d.getAttributeNode(node))
    	{
    	d.style.change = '#'+color
    	}
    
    }
    So, in theory, this should now say (witht the parameters)

    Code:
    function updateElement(color,node,change,tag) {
    var allDivs=document.getElementsByTagName('a'), i=0,d;
    
    while(d=allDivs[i++])
    {
    	if(d.getAttributeNode('link'))
    	{
    	d.style.color= '#'+color
    	}
    
    }
    The problem is, this doesnt seem to work.. don't know why.

    Any suggestions?

    Thanks
    nmyster

  14. #14
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    And the HTML looks like...? Post those A HTML elements for us too see. One of them, at least

  15. #15
    Join Date
    Dec 2010
    Location
    UK
    Posts
    12
    When I had exactly as you posted, I added tobecoloured="yes" to some of the elements that were all div's... worked fine.. for example:

    <div class="company" tobecoloured="yes">

    COMPANY NAME
    </div>

    now, with the changes and updating the onchange event, this does not work.

    The link i want to change is:

    <a href="#" link="yes">Hello</a>

    So i am following the same theory as you said with tobecoloured. Not sure why this wouldn't work, unless im makingg some stupid mistake

    I am newish to JS btw...

    Thanks
    Neil

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles