How to apply two styles to one table, hide one of them and show the other (example)?

Question

IT education

<SCRIPT type="text/javascript">
var a=0;
if (a==0) {
document.getElementsByClass('table3').style.display = "none";
}
</SCRIPT>
<STYLE>
//table3 желтая подсветка, table4 синяя

.table4 {
  -moz-box-shadow:0 0 10px #4195fc;
-webkit-box-shadow:0 0 10px #4195fc;
box-shadow:0 0 10px #4195fc;
}
.table3 {
  -moz-box-shadow:0 0 10px #ffd700;
-webkit-box-shadow:0 0 10px #ffd700;
box-shadow:0 0 10px #ffd700;
}

</STYLE>
<table border=1 class="table3 table4">
<tr>
<td>Пример</td>
</tr>
</table>

The following is required:
If the condition is met, then change the yellow highlight of the table to blue
I would like to somehow hang two classes on the table and, by condition, hide one of them and display the second
Here is a non-working example: https://jsfiddle.net/8bgawthu/