Take the 2-minute tour ×

I'm trying to change both the background and text color of a table and all its cells with a timer. I have the script below just before the end tag. The background is the only thing that changes. The id of the table is 'titleTable'. Thanks

<script language="Javascript">
<!-- Begin
setInterval("Timer()", 500);
function Timer() {
    if(x==0 && set==1) {
    if(x==1 && set==1) {
// End -->
share|improve this question
Could you post the code you do have, to make it easier to trouble shoot where the issue is taking place. –  Loktar Feb 7 '11 at 18:42
code now showing... –  hunter Feb 7 '11 at 18:44
You can format code by indenting it with four spaces. –  SLaks Feb 7 '11 at 18:45
Are you sure the background color changes? The code to change background color is this, titleTable.style.backgroundColor = '#FFFFFF'. Also how are u grabbing the DOM Element for titleTable? document.getElementById? Please post the full code. –  Aravin R Feb 7 '11 at 18:55
add comment

2 Answers

up vote 2 down vote accepted
(function() {
    var s = document.getElementById('titleTable').style,
        f = false,
        c1 = '#000000',
        c2 = '#ffffff';

    setInterval(function() {
        s.backgroundColor = f ? c1 : c2;
        s.color = f ? c2 : c1;
        f = !f;
    }, 500);

Live demo: http://jsfiddle.net/Dzk2h/2/

Just put the above code inside a <script> element at the bottom of your page.

share|improve this answer
Thanks for attaching that script.. helped me find what was going on. –  VagueExplanation Feb 7 '11 at 19:27
add comment

var titleTable = document.getElementById('titleTable');

if((x==0) && (set==1))

Just use "blink" tag =)

Ah, "The background is the only thing that changes". Check styles. If you have CSS rule like

#titleTable td { color: black; }

It will not be overriden by setting inline style to the table.

share|improve this answer
Ah, yes! This was it. I wasn't thinking. –  VagueExplanation Feb 7 '11 at 19:27
Just for anyone else that has problems with this, apparently you cannot edit pseudo tags for html with javascript globally. For instance, there is no way (that I've found) that you can edit all h1 tags style properties. Instead, you have to give that tag a unique id and edit it with javascript from there. –  VagueExplanation Feb 7 '11 at 19:46
Of course ) But there's a way for manipulating CSS rules from js. developer.mozilla.org/en/Gecko_DOM_Reference/… –  kirilloid Feb 7 '11 at 19:53
Sweet =) thanks i'll dig into that –  VagueExplanation Feb 8 '11 at 2:19
add comment

Your Answer


