Solución:
Usando Jquery
Use la función css () para aplicar estilo a los elementos existentes donde pasa un objeto que contiene estilos:
var styles = {
backgroundColor : "#ddd",
fontWeight: ""
};
$("#myId").css(styles);
También puede aplicar un estilo a la vez con:
$("#myId").css("border-color", "#FFFFFF");
Vanilla JS:
var myDiv = document.getElementById("#myId");
myDiv.setAttribute("style", "border-color:#FFFFFF;");
Con CSS:
También puede usar un archivo css separado que contenga los diferentes estilos necesarios dentro de las clases y, según el contexto, agregue o elimine esas clases a sus elementos.
en su archivo css puede tener clases como
.myClass {
background-color: red;
}
.myOtherClass {
background-color: blue;
}
Nuevamente usando jquery, para agregar o eliminar una clase a un elemento, puede usar
$("#myDiv").addClass('myClass');
o
$("#myDiv").removeClass('myClass');
Creo que esta es una forma más limpia, ya que separa tu estilo de tu lógica. Pero si los valores de su css dependen de lo que devuelve el servidor, esta solución puede ser difícil de aplicar.
La forma en que lo haría es construir el CSS y establecer el atributo de estilo en los elementos adecuados. Por ejemplo:
var div = document.createElement('div');
div.setAttribute("style", "color: blue, margin-top:5px");
document.body.appendChild(div);
Este código creará un nuevo elemento div con el estilo color: blue, margin-top:5px y añádalo a la página.
Utilizando Vanilla JS podrías hacer algo como esto.
Si desea agregar un Clase CSS llamado animar a un elemento con Id circulo, Hazlo asi.
var circle = document.getElementById("circle");
circle.classList.add('animate');
Puede eliminar la clase de esta manera.
circle.classList.remove('animate');