Obter valores de propriedades CSS para elementos HTML em JavaScript

No desenvolvimento web, a manipulação dinâmica de propriedades CSS pode aprimorar a experiência do usuário e a interface. Com JavaScript, acessar essas propriedades é simples.

No seu cenário, um arquivo CSS está vinculado a uma página HTML e você precisa recuperar uma propriedade específica (por exemplo, cor) para um div com o nome de classe " disposição." Veja como fazer isso usando JavaScript:

Opção 1: análise de folhas de estilo de documento (não recomendado)

Explicação:
Este método envolve iterar manualmente pelo documento .styleSheets e analisando seu conteúdo para procurar a propriedade desejada. No entanto, essa abordagem não é recomendada, pois pode se tornar complicada, especialmente para arquivos CSS complexos ou quando você precisa recuperar propriedades de vários elementos.

Opção 2: emular elemento e usar estilo computado (preferencial)

Explicação:
Este método é mais eficiente e fornece resultados precisos. Envolve a criação de um elemento com o mesmo nome de classe do elemento de destino e, em seguida, o acesso ao estilo computado do elemento criado. O estilo calculado representa o estilo real aplicado ao elemento, incluindo estilos herdados e quaisquer modificações feitas por meio de folhas de estilo do usuário ou JavaScript.

Código JavaScript:

function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};

Considerações sobre estilo não inline

Se desejar recuperar propriedades de estilo herdadas sem definições de estilo inline, você pode remover temporariamente os estilos inline e depois recuperar os valores herdados.

Código JavaScript:

function getNonInlineStyle(elem, prop) {
  var style = elem.cssText; // Cache the inline style
  elem.cssText = ""; // Remove inline styles
  var inheritedPropValue = getStyleProp(elem, prop); // Retrieve inherited value
  elem.cssText = style; // Restore inline style
  return inheritedPropValue;
}