La inconveniencia de las clases en JavaScript
Supongamos que tenemos varias clases para estilizar mensajes:
.success {
color: green;
}
.warning {
color: orange;
}
.error {
color: red;
}
Supongamos que en algún elemento mostramos un mensaje exitoso y le asignamos la clase correspondiente para el éxito:
elem.classList.add('success');
Ahora supongamos que en este mismo elemento mostramos un mensaje de error y le asignamos la clase correspondiente para el error:
elem.classList.add('error');
Como resultado, el elemento tendrá dos clases en conflicto entre sí:
<div id="elem" class="success error">
text
</div>
Resulta que antes de agregar una nueva clase, primero tendremos que eliminar la anterior:
elem.classList.remove('success');
elem.classList.add('error');
Esto no es muy conveniente, ya que podemos no saber exactamente cuál era la clase anterior y tendremos que eliminar todas las clases una tras otra:
elem.classList.remove('success');
elem.classList.remove('warning');
elem.classList.add('error');
Dado un input. Al perder el foco, verifique
que no se hayan ingresado más de 9
caracteres. Si es así, pinte
el borde del input de color verde,
y si no es así, de rojo.