Question

I have 2 lines of code in my JavaScript to dynamically change colors, one to change the background color of a table row and the other to change the font color:

rows[i].style.backgroundColor = 'red'
rows[i].style.color = 'white'

I need one more line of code to change the font color specifically when it is a hyperlink. I tried:

rows[i].style.link.color = 'white'

and several other variations but I can’t get the linked font colors to change. Can anyone help with this please? Thanks.

Full code:

var INTENDED_MONTH = 7 //August
// INTENDED_MONTH is zero-relative
now = new Date().getDate(),
rows = document.getElementById('scripture').rows;
if (new Date().getMonth() != INTENDED_MONTH) {
    // need a value here less than 1, or the box for the first of the month will be in Red
    now = 0.5
};
for (var i = 0, rl = rows.length; i < rl; i++) {
    var cells = rows[i].childNodes;
    for (j = 0, cl = cells.length; j < cl; j++) {
        if (cells[j].nodeName == 'TD'
  && cells[j].firstChild.nodeValue != ''
  && cells[j].firstChild.nodeValue == now) {
            rows[i].style.backgroundColor = 'red'
            rows[i].style.color = 'white'
            rows[i].style.a.color = 'white'
            $('html,body').delay(500).animate({ scrollTop: rows[i].offsetTop }, 2000);
        }
    }
}

Answer 1

What about using CSS?

tr{
   backgorund:red;
   color:white;
}
tr a{
   color:white;
}

If you need JavaScript, you can use

var els=rows[i].getElementsByTagName('a');
for(var i=0;i<els.length;i++){
   els[i].style.color = 'white';
}

Edit:

You can also use

tr a{
   color:inherit;
}

and then when you do

rows[i].style.color = 'white'

anchors’ color will be the same as row’s color – white -.

Edit 2:

As I said in my comment, even if you create the links with javascript, they are HTML elements so CSS affects them.

But the problem is that the rule

table.hovertable a:link, table.hovertable a:visited, table.hovertable a:hover, table.hovertable a:active {
    color: black;
}

overrides

table.hovertable tr a {
    color: inherit;
}

Then, you need

table.hovertable tr a:link {
    color: inherit;
}

which has the selector :link, so both rules have the same selectors and the last rule has effect.

But I forgot to say that inherit doesn’t work on IE7 and before. Then, you could use

rows[i].className+=' selected';

and

table.hovertable tr.selected{
   color:white;
   background:red;
}

table.hovertable tr.selected a:link{
   color:white
}

Edit3:

If you want to set the same styles to the cell with current month, you can do

var m=new Date().getMonth();
document.getElementById('months').rows[Math.floor(m/6)].cells[m%6].className+=' selected';

(suposing that the table has id="months")

But then

table.hovertable .selected{
   color:white;
   background:red;
}

table.hovertable .selected a:link{
   color:white
}

(.selected instead of tr.selected, now it’s a td).

But I see that you still use color:inherit. Now that you set the styles using classes you don’t need it