"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo extraer propiedades CSS dinámicamente usando JavaScript?

¿Cómo extraer propiedades CSS dinámicamente usando JavaScript?

Publicado el 2024-11-08
Navegar:700

How to Extract CSS Properties Dynamically Using JavaScript?

Extracción de propiedades CSS mediante JavaScript

Navegar por las hojas de estilo adjuntas a un documento HTML puede proporcionar información valiosa sobre la presentación de los elementos de la página. En particular, la capacidad de leer propiedades CSS específicas puede ayudar en la manipulación dinámica de estilos.

Un enfoque implica inspeccionar manualmente el objeto document.styleSheets y analizar las reglas de estilo. Sin embargo, este método requiere mucha mano de obra y puede resultar difícil de manejar, especialmente cuando se dirige a selectores específicos.

Una técnica más directa es crear un elemento temporal que coincida con el selector deseado. Usando los métodos getComputedStyle() (para navegadores modernos) o currentStyle (para Internet Explorer), puede recuperar el valor calculado de cualquier propiedad CSS para el elemento creado.

Por ejemplo, considere el siguiente código para recuperar el propiedad de color de un

con la clase "layout":
function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create div
  d.className = "layout"; // Set class = "layout"
  alert(getStyleProp(d, "color")); // Get property value
};

Alternativamente, si desea determinar la propiedad CSS heredada de una hoja de estilo sin considerar ningún estilo en línea, se puede utilizar la siguiente función:

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

Al aprovechar estas técnicas, los desarrolladores pueden ajustar dinámicamente las propiedades CSS de los elementos, manipular su presentación y obtener una comprensión más profunda del estilo de la página.

Declaración de liberación Este artículo se reimprime en: 1729673789 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3