Styles

Estilo en linea

Los estilos en línea son estilos que están presentes en el HTML en el atributo de estilo..style nos permite tener acceso al estilo en linea de elementos y poder cambiarlos o modificarlo.

  
  <section class="section" id="section" style="color:red;">Section Content</section>
  

  
  let element = document.querySelector('#section');

  let fontColor = element.style.color;

  console.log(fontColor); //-> red
  
  element.style.color = 'blue';
  

Estilo calculados

Dado que el estilo de un elemento puede modificarse desde un bloque de declaración de estilo CSS ubicado en otro archivo o en el archivo HTML donde se declara el elemento, no podemos confiar solo en HTMLElement.style para acceder a todas sus propiedades de estilo.

  
  <section class="section" id="section">Section Content</section>
  

  
  let element = document.querySelector('#section');

  let fontColor = window.getComputedStyle(element).getPropertyValue('color');

  console.log(fontColor); //-> rgb(255, 0, 0)