Este capítulo va de principalmente tres métodos:
- Style (modificar estilo)
- Add (Adicional una clase)
- Remove (Remover una clase)
Método .style() para modificar estilos
const heading = document.querySelector('h1');Hay todo un objeto con propiedades CSS que puedes utilizar, si quieres conocerlas todas coloca...
Y visualiza con Firefox Develop todos los métodos posibles a usar.
console.log(heading.style);Algunos ejemplos haciendo cambios en el CSS con el método .style().
Nota: las propiedades que le puedes pasar son similares a las de CSS, con la diferencia de que el guion se elimina y la primera letra de su segunda palabra es en mayúscula.
heading.style.backgroundColor = 'red';
heading.style.textTransform = 'uppercase';
heading.style.fontFamily = 'Arial';Ahora yo no recomiendo que pongas style, ya que tu archivo JS será muy grande, otra desventaja es que la apariencia debe ser algo que sea responsabilidad del CSS, pero lo que si puedes hacer es agregar o quitar classes.
El método .add para agregar clases
Cuando se usa este método, aún es necesario encadenar otro método para listar las clases del elemento, eso se hizo en el curso con el método .classList(). Luego es que se encadena el método .add() para adicional algo a esa lista, que por lo que veo en este caso se adiciona un string. Por lo tanto, este método, lo evalúo como una herramienta que me va a adicional un valor a lo que sea que se esté listando.
Vamos a seleccionar el primer card, el método classList.() nos permitirá listar las classes
const card = document.querySelector('.card');
console.log(card);
console.log(card.classList);
El método .odd() te permitirá añadir una clase. Si deseas añadir múltiples classes debes agregar una coma en cada una.
card.classList.add('nueva-clase', 'otra clase'); 
Metodo .remove() para remover una clase
Sin mayor explicación:
card.classList.remove('card'); De la misma forma si deseas remover múltiples classes tendrías que hacerlo agregando una coma.