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
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.
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