Obtener valores de propiedades CSS para elementos HTML en JavaScript

En el desarrollo web, la manipulación dinámica de las propiedades CSS puede mejorar la experiencia y la interfaz del usuario. Con JavaScript, acceder a estas propiedades es sencillo.

En su caso, un archivo CSS está vinculado a una página HTML y necesita recuperar una propiedad específica (por ejemplo, color) para un div con el nombre de clase " disposición." Aquí se explica cómo lograr esto usando JavaScript:

Opción 1: análisis de hojas de estilo de documentos (no recomendado)

Explicación:
Este método implica iterar manualmente a través del documento .styleSheets objeto y analiza su contenido para buscar la propiedad deseada. Sin embargo, no se recomienda este enfoque, ya que puede resultar difícil de manejar, especialmente para archivos CSS complejos o cuando necesita recuperar propiedades de varios elementos.

Opción 2: emular elementos y usar estilo computarizado (preferido)

Explicación:
Este método es más eficiente y proporciona resultados precisos. Implica crear un elemento con el mismo nombre de clase que el elemento de destino y luego acceder al estilo calculado del elemento creado. El estilo calculado representa el estilo real aplicado al elemento, incluidos los estilos heredados y cualquier modificación realizada a través de hojas de estilo del usuario o 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
};

Consideraciones de estilo no en línea

Si desea recuperar propiedades de estilo heredadas sin definiciones de estilo en línea, puede eliminar temporalmente los estilos en línea y luego recuperar los valores heredados.

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;
}