"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Comment extraire dynamiquement les propriétés CSS à l’aide de JavaScript ?

Comment extraire dynamiquement les propriétés CSS à l’aide de JavaScript ?

Publié le 2024-11-08
Parcourir:130

How to Extract CSS Properties Dynamically Using JavaScript?

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

avec la classe "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
};

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.

Déclaration de sortie Cet article est réimprimé à l'adresse : 1729673789. En cas d'infraction, veuillez contacter [email protected] pour le supprimer.
Dernier tutoriel Plus>

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