Obtenir les valeurs des propriétés CSS pour les éléments HTML en JavaScript

Dans le développement Web, la manipulation dynamique des propriétés CSS peut améliorer l'expérience utilisateur et l'interface. Avec JavaScript, accéder à ces propriétés est simple.

Dans votre scénario, un fichier CSS est lié à une page HTML et vous devez récupérer une propriété spécifique (par exemple, la couleur) pour un div avec le nom de classe " mise en page." Voici comment y parvenir à l'aide de JavaScript :

Option 1 : Analyse des feuilles de style de document (non recommandé)

Explication :
Cette méthode implique une itération manuelle dans le document .styleSheets et analyse son contenu pour rechercher la propriété souhaitée. Cependant, cette approche n'est pas recommandée car elle peut devenir lourde, en particulier pour les fichiers CSS complexes ou lorsque vous devez récupérer les propriétés de plusieurs éléments.

Option 2 : émulation d'un élément et utilisation d'un style calculé (préféré)

Explication :
Cette méthode est plus efficace et fournit des résultats précis. Cela implique de créer un élément avec le même nom de classe que l'élément cible, puis d'accéder au style calculé de l'élément créé. Le style calculé représente le style réel appliqué à l'élément, y compris les styles hérités et toutes les modifications apportées via les feuilles de style utilisateur ou JavaScript.

Code JavaScript :

function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};

Considérations sur les styles non en ligne

Si vous souhaitez récupérer les propriétés de style héritées sans définitions de style en ligne, vous pouvez supprimer temporairement les styles en ligne, puis récupérer les valeurs héritées.

Code JavaScript :

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