0

How to override CSS stylesheet

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; }

28th Nov 2017, 12:30 PM
Fabian de Korver
Fabian de Korver - avatar
7 Réponses
+ 6
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";
28th Nov 2017, 12:44 PM
Ipang
+ 7
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
28th Nov 2017, 12:39 PM
Ipang
+ 6
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.
28th Nov 2017, 12:50 PM
Ipang
+ 6
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>
28th Nov 2017, 6:43 PM
Amethyst Animion
Amethyst Animion - avatar
+ 1
But how do I change the color with JavaScript?
28th Nov 2017, 12:41 PM
Fabian de Korver
Fabian de Korver - avatar
+ 1
Thanks!
28th Nov 2017, 12:45 PM
Fabian de Korver
Fabian de Korver - avatar
0
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.
28th Nov 2017, 12:33 PM
Fabian de Korver
Fabian de Korver - avatar