How to override CSS stylesheet

Question

I have a table:

<table border = 1>
<tr>
<td bgcolor = #80ffff>Day of the week</td>
<td class = monday>Monday</td>
<td class = tuesday>Tuesday</td>
<td class = wednesday>Wednesday</td>
<td class = thursday>Thursday</td>
<td class = friday>Friday</td>
<td class = saturday>Saturday</td>
<td class = sunday>Sunday</td>
</tr>
</table>

with javascript:

var date = new Date();
var day = date.getDay();

if (day == 1){
day = "monday";
}
else if (day == 2){
day = "tuesday";
}
else if (day == 3){
day = "wednesday";
}
else if (day == 4){
day = "thursday";
}
else if (day == 5){
day = "friday";
}
else if (day == 6){
day = "saturday";
}
else if (day == 7){
day = "sunday";
}

columns = document.getElementsByClassName(day);

for (var i = 0; i < columns.length; i++){
columns[i].bgColor = "#99ddff";
}

and it worked fine, but now I've added the CSS and the JavaScript seems unable to override the CSS:

.monday{
background: #e6ffff;
}

.tuesday{
background: #e6ffff;
}

.wednesday{
background: #e6ffff;
}
.thursday{
background: #e6ffff;
}
.friday{
background: #e6ffff;
}
.saturday{
background: #e6ffff;
}

.sunday{
background: #e6ffff;
}

Answer 1

You can try to change the cell's background color by setting its background color with JavaScript if you want, change your code where it changes the background color, like this:

columns[i].style.backgroundColor = "#9df";

Answer 2

It's not JavaScript's fault, the bgcolor is a tag attribute, and having a CSS defined, the bgcolor attribute is overridden by CSS rules, that's just how it works, tag attributes has lower precedence to CSS rules. The use of CSS also makes the use of JavaScript becomes unnecessary, as all the table cells will follow the CSS rule (background color) as long as you set it as the class attribute.

Hth, cmiiw

Answer 3

It is not a good idea to mix up CSS style with tag attribute for the same purpose, like this,

<td class = monday bgcolor = #36ffff>

Use CSS instead, that will help ease your work, if you still use bgcolor, you will have to modify each cell bgcolor everytime you want to change it, with CSS, you only do class="classname", then if you want to change the color you only need to change in CSS class, and all table cells using that class will use the new settings.

Answer 4

you can use this method if the color is same

<td class="lightgrey">Monday</td>
<td class="lightgrey">Tuesday</td>
<td class="lightgrey">Wednesday</td>
...

<style>
.lightgrey {
background: #e6ffff;
}
</style>

Answer 5

But how do I change the color with JavaScript?

Answer 6

Thanks!

Answer 7

I've previously made it work with having the columns be
<td class = monday bgcolor = #36ffff>
which worked fine, but I also want to learn how I can do it without using inline CSS.