Extraction de propriétés CSS à l'aide de JavaScript
La navigation dans les feuilles de style jointes à un document HTML peut fournir des informations précieuses sur la présentation des éléments de la page. En particulier, la possibilité de lire des propriétés CSS spécifiques peut faciliter la manipulation dynamique du style.
Une approche consiste à inspecter manuellement l'objet document.styleSheets et à analyser les règles de style. Cependant, cette méthode demande beaucoup de travail et peut devenir lourde, en particulier lorsque vous ciblez des sélecteurs spécifiques.
Une technique plus directe consiste à créer un élément temporaire qui correspond au sélecteur souhaité. À l'aide des méthodes getComputedStyle() (pour les navigateurs modernes) ou currentStyle (pour Internet Explorer), vous pouvez récupérer la valeur calculée de n'importe quelle propriété CSS pour l'élément créé.
Par exemple, considérez le code suivant pour récupérer le propriété color d'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
};
Alternativement, si vous souhaitez déterminer la propriété CSS héritée d'une feuille de style sans prendre en compte les styles en ligne, la fonction suivante peut être utilisée :
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;
}
En tirant parti de ces techniques, les développeurs peuvent ajuster dynamiquement les propriétés CSS des éléments, manipuler leur présentation et mieux comprendre le style de la page.
Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.
Copyright© 2022 湘ICP备2022001581号-3