change text color 1

[seanbo]

i have have a peice of javascript which loads a random picture, and sets the backround colour to one which suits it. i would also like to change the text colour so that it is readablw on the backgroud. how can i change the background colour? i think i'm probably looking for something that involves using the 'name' tag in conjunction with 'div' or 'class tags.

____________________________________________________
If you like a post, show you care by giving it a <censored>.

 

[BabyJeffy]

Post a sample URL so we can see what code changes may be required.

Jeff

 

[seanbo]

this is a sample of my temp solution:

if(num==4){
document.getElementById("eyes").src = "eyes/eye5.jpg";
document.bgColor = "#080B08";
document.fgColor= "#DFDFDF";
}

it changes a picture, the background, and all the text. at the moment this is fine, but what couldi do to change just some text?

____________________________________________________
If you like a post, show you care by giving it a <censored>.

 

[WartookMan]

document.bgColor / document.fgColor as you mention will change the document background / foreground colors respectively.

To isolate a single piece (block) of text, wrap it in a DIV and add an "id" to it:

<style type="text/css">
div.newstyle {
	background-color: #ff00ff;
	color: #00ff00;
}
</style>

<div id="thetext">This is the text.</div>

<script type="text/javascript">
document.getElementById("thetext").style.backgroundColor = "#0000ff";
document.getElementById("thetext").style.color= "#ff00ff";
</script>

<button onclick="document.getElementById('thetext').className='newstyle';">Change</button>

You can either set the text color directly inline, or (replace the BUTTON with another inline script command) assign a new class dynamically.

NOTE: In this example, the '...("thetext").style...' assignments have higher priority (CSS wise) over the class assignment by the BUTTON. Therefore you would need to add "!important" to your class definition, for this code to work.

Using your example:
You could create a two dimensioned array with background/foreground colors, and then pass the "num" value to reference the correct pair.
...
colors[num][0]='{foreground color}';
colors[num][1]='{background color}';
...
obj=document.getElementById('thetext');
obj.style.color=colors[num][0];
obj.style.backgroundColor=colors[num][1];
...

Hope this helps.

Pete.


Web Developer &amp; Aptrix / Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk