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.

WIUM LIE, Håkon ; FANTASAI ; ATKINS, Tab. CSS Cascading and Inheritance Level 3. W3C,

BOS, Bert ; ÇELIK, Tantek ; HICKSON, Ian, et al.. CSS 2.1 Specification. W3C, . 6 Assigning property values, Cascading, and Inheritance

Window.getComputedStyle. Mozilla Developer Network,

used value. Mozilla Developer Network,

Computed value. Mozilla Developer Network,

initial. Mozilla Developer Network,