Comment savoir si une hauteur est définie par une règle CSS

Petit problème rencontré récemment alors que j'avais besoin de savoir si la hauteur d'un élément était imposée par une règle CSS ou s'il s'agissait de sa hauteur « naturelle ».

La valeur d'une propriété CSS appliquée à un élément HTML peut avoir 3 origines :

  1. Une règle déclarée dans son attribut « style ».
  2. Une règle déclarée dans un élément style ou un fichier de styles.
  3. La valeur par défaut (« initiale »).

La question est alors de savoir comment distinguer les 2 premières de la dernière, ou comment savoir si la valeur calculée et appliquée par le navigateur web est différente de la valeur initiale. Essayons par exemple de déterminer si la hauteur d'un paragraphe est induite uniquement par son contenu ou si une règle CSS force sa valeur...

Pour connaître la valeur d'une propriété CSS appliquée à un élément, nous pouvons utiliser la méthode getComputedStyle :

var elHeight = window.getComputedStyle(el, null).height;
Récupérer la valeur de la hauteur d'un élément.

Cette méthode va renvoyer une valeur en pixels comme « 70px » que vous ayez définie une hauteur en CSS ou non. Pour distinguer le paragraphe qui occupe une hauteur adaptée à son contenu d'un paragraphe qui a une hauteur spécifiquement déclarée, il faut que nous puissions comparer la valeur calculée finale à celle induite par la valeur initiale de la propriété height, en l'occurrence auto.

/**
 *  Savoir si la valeur d'une propriété CSS appliquée à un 
 *  élément est égale à la valeur initiale de cette propriété.
 *
 *  @param {HTMLElement} el Elément HTML à analyser.
 *  @param {String} proprerty Nom de la propriété CSS.
 *  @param {String} initial Valeur initiale.
 *  @return {Boolean}
 */
var initialCssValue = function(el, property, initial) {
    if (el.style[property]) {
        return el.style[property] === initial;
    }
    var styles = window.getComputedStyle(el, null),
        value = styles[property],
        isInitial = false;
    el.style[property] = initial;
    if (styles[property] === value) {
        isInitial = true;
    }
    el.style[property] = '';
    return isInitial;
};
Différencier une valeur initiale d'une valeur définie par CSS.
if (initialCssValue(el, 'height', 'auto')) {
    // height is initial value
} else {
    // height defined by css
}
Exemple d'utilisation.

La technique a évidemment une portée limitée : elle ne peut pas faire la distinction entre une valeur initiale appliquée par le navigateur (exemple : la couleur) et une valeur identique appliquée par une règle CSS.

Titre
CSS Cascading and Inheritance Level 3
Auteurs
Håkon WIUM LIE
Auteurs
FANTASAI
Auteurs
Tab ATKINS
Editeur
W3C
Date
Titre
CSS 2.1 Specification
Auteurs
Bert BOS
Auteurs
Tantek ÇELIK
Auteurs
Ian HICKSON
Auteurs
Lie WIUM
Editeur
W3C
Date
Chapitre
6 Assigning property values, Cascading, and Inheritance
Titre
Window.getComputedStyle
Editeur
Mozilla Developer Network
Date
Titre
used value
Editeur
Mozilla Developer Network
Date
Titre
Computed value
Editeur
Mozilla Developer Network
Date
Titre
initial
Editeur
Mozilla Developer Network
Date