Tengo estos divs que uso como botones.
var color_switch = 1; var tmbtns = document.getElementsByClassName("time-button"); for (var i = 0; i < tmbtns.length; i++) { tmbtns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active2"); current[0].className = current[0].className.replace(" active2", ""); this.className += " active2"; }); } .time-buttons{ float: left; } .time-button{ float: left; padding: 0.2rem; padding-bottom: 0.3rem; margin-left: 1px; margin-right: 1px; cursor: pointer; color: lightgrey; width: 30px; text-align: center; } .active2, .time-button:hover{ color: red; } <div class="time-buttons"> <div class="time-button active2"><small>2h</small></div> <div class="time-button"><small>8h</small></div> <div class="time-button"><small>1d</small></div> <div class="time-button"><small>3d</small></div> <div class="time-button"><small>1w</small></div> <div class="time-button"><small>1m</small></div> </div>¿Cómo podría hacer que cuando cambia color_switch, el color al que cambia el texto también cambie? Entonces, cuando color_switch = 1, el texto se resalta en rojo, y cuando color_switch = 2, el texto se resalta en azul, y así sucesivamente.
Por ejemplo, puede usar el interruptor en el que establecerá de qué color debe pintarse el elemento actual.
switch (color_switch) { case 1: this.style.color = "red"; break; case 2: this.style.color = "blue"; break; }Hay muchas soluciones posibles, aquí hay una de ellas: https://jsfiddle.net/9bj86L72/
Creo que la mejor práctica es no fusionar el código css en js, lo mejor es crear clases de modificador y usarlo para mapearlo en js. por ejemplo:
.time-buttons.type1 .time-button:hover { color: red; } .time-buttons.type2 .time-button:hover { color: red; }después en js de acuerdo con color_switch establecer la clase de modificador
document.querySelector('.time-buttons').className = document.querySelector('.time-buttons').className + " type" + color_switchpor favor vea el ejemplo en https://codepen.io/ricardocermeno/pen/ExojdVZ