function updateElement(color) {
var allDivs = document.getElementsByTagName("div");
for (i=0;i<allDivs.length;i++) {
allDivs[i].style.backgroundColor = '#'+color;
}
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?
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 indentedids. 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;
}
}
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
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>
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.
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.
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:
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.
Get all elements by id or tags
Reply With Quote
This works... but
Originally Posted by nmyster
Bookmarks