Hello,
I have this in my CSS:
#contentbox a{
font-weight: bold;
color: #c8a468;
cursor: pointer;
}And want to change the color with Javascript's function: document.getElementById, but when I use document.getElementById('contentbox a').style.color= "#d05048", I get an error that it doesn't know 'contentbox a'.
I tried multiple things and searched on google, but I cannot get it to work.
Who can help me? It's a simple question...
Hi there,
you have made mistake here
document.getElementById('contentbox a').style.color= "#d05048"that should look like
document.getElementById('contentbox').style.color= "#d05048"Example:
CSS:
<style type="text/css">
#contentbox, #contentbox a{
font-weight: bold;
color: #c8a468;
cursor: pointer;
}
</style>JavaScript:
<script type="text/javascript">
function changeColor(){
var divID = document.getElementById('contentbox');
divID.style.color= "#d05048";
}
</script>HTML:
<div id="contentbox">
<a href="javascript:void(0);" onClick="changeColor()">Link Text</a> Other Text </div>hope this will help you
Rahul Dev
Hi, thanks for your help, but the 'a' is there on purpose. I want to change the colour of links only in the div 'contentbox' (with javascript).
hi you can not do directly like this, the way you have tried is wrong.
getElementById() takes only id.
use elem.getElementsByTagName('tag name');
this will return array of element('tag name') inside elem.
using loop you can...........
i think this much is enough.
<style content="text/css">
#contentbox a{
font-weight: bold;
color: #c8a468;
cursor: pointer;
}
</style>
<script content="text/javascript">
function text_over(){
document.getElementById('contentbox a').style.color= "#d05048";
}
function text_out(){
document.getElementById('contentbox a').style.color= "#c8a468";
}
</script>
</HEAD>
<BODY>
<div id="contentbox">
<a href="......" id="contentbox a" onMouseover="text_over()" onMouseout="text_out()">infinite</a>
</div>
</BODY>
i think this may help you.
aravelli, that works, thank you, but only for the first one containing the id. On some pages I have more links and now only the first one changes.
this is what I have:
try{document.getElementById('contentbox a').style.color= "#d05048";}catch(err){};there is a try...cath function because some pages don't have the 'contentbox a' id.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
a:link {
color: #c8a468;
text-decoration: none;
}
a:visited {
color: #d05048;
text-decoration: none;
}
a:hover {
color: #666666;
text-decoration: none;
}
a:active {
color: #84414A;
text-decoration: none;
}</style>
</HEAD>
<BODY>
<div id="contentbox">
<a href="......">text goes here</a><br>
<a href="......">text goes here</a><br>
<a href="......">text goes here</a>
</div>
</BODY>
</HTML>
why can't you go like this
instead of using javascript
i think this will help for ur need
I have links in the contentbox and I have links in my menu. When I use CSS to change "a" the menu gets the wrong colours and cannot be fixed with div's because the "a" tag comes as last and so overwrites the rest.
I want to only change the link colours in the contentbox but javascript doesn't understand the id "contentbox a" because it's the id "a" in the id "contentbox" .
When I gave the links an id (all the same id) it worked, but javascript only changed the first id, while there are more on some pages. Maybe it can be done with a while loop, but I have no idea how.
<style type="text/css">
#contentbox a:link {
color: #c8a468;
text-decoration: none;
}
#contentbox a:visited {
color: #d05048;
text-decoration: none;
}
#contentbox a:hover {
color: #666666;
text-decoration: none;
}
#contentbox a:active {
color: #84414A;
text-decoration: none;
}</style>
change the css like this
An id can be used only once. It can NOT appear in multiple tags.
You need to give each tag a unique id, and then cycle through the ids with a loop in js.
e.g.
<a .... id="aa1">
<a .... id="aa2">
<a .... id="aa3">
<a .... id="aa4">
<a .... id="aa5">
Alternatively, try this trick, if you don't mind presetting the available colors ( in a way, it's better because those colours can be defined in the CSS ). This works by dynamically changing the class of the containing element, the CSS 'cascade' effect sorts out the rest:
<html>
<head>
<title>Color changing magic with a classname trick</title>
<style type="text/css">
div.red_links a
{
color:red;
}
div.blue_links a
{
color:blue;
}
</style>
<script type="text/javascript">
function set_linkcolor( to )
{
document.getElementById( "color_state" ).className =
to + "_links";
}
</script>
</head>
<body>
<div id="color_state" class="red_links">
<ul>
<li><a>An anchor</a></li>
<li><a>Another</a></li>
<li><a>And another</a></li>
<li>Some normal text</li>
<li>Some more..</li>
<li>And some more</li>
</ul>
</div>
<span onmousedown="set_linkcolor( 'blue' )"
onmouseup="set_linkcolor( 'red' )"
style="border:solid 1px black;">
Click me!
</span>
</body>
</html>Thanks MattEvans, after a short trying period I got it working with your 'system'.
You should go like this...
//////////////// elementParentId is the Id of the element that contains all the elemens to be changed, newColor explains itself, tagName is the type of element you want to change/////////////////////////
function changeColor(elementParentId , tagName, newColor){
elements=document.getElementById(elementParentId ).getElementsByTagName(tagName);
for(i=0;i<elements.length;i++){
elements[i].style.color=newColor;
}
}
changeColor('contentbox','a','#d05048');
aravelli, that works, thank you, but only for the first one containing the id. On some pages I have more links and now only the first one changes.
this is what I have:
try{document.getElementById('contentbox a').style.color= "#d05048";}catch(err){};there is a try...cath function because some pages don't have the 'contentbox a' id.
you need to do it this way
var num=document.getElementById("contentbox").childNodes.length;
for(var i=0;i<num;i++){
if(document.getElementById("contentbox").childNodes[i].nodeName=="A"){
document.getElementById("contentbox").childNodes[i].style.color="#d05048";
}
}essentially you loop through all the elements of div content box for all the links and then you change them.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.