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

Extraire des 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 lorsqu'on cible 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é de couleur d'un

avec la classe "layout":

<code class="javascript">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
};</code>

Alternativement, si vous souhaitez déterminer la propriété CSS héritée d'une feuille de style sans tenir compte des styles en ligne, la fonction suivante peut être utilisée :

<code class="javascript">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;
}</code>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html Object if for using class Property function this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn