web-dev-qa-db-fra.com

Obtenir une valeur CSS avec JavaScript

Je sais que je peux définir une valeur CSS via JavaScript, telle que:

document.getElementById('image_1').style.top = '100px';

Mais, puis-je obtenir une valeur de style spécifique actuelle? J'ai lu où je pouvais obtenir le style complet de l'élément, mais je ne voulais pas analyser la chaîne entière si ce n'était pas le cas.

javascriptcss
170
Michael Paul

Vous pouvez utiliser getComputedStyle() .

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

jsFiddle .

309
alex

La propriété element.style vous permet de connaître uniquement les propriétés CSS définies comme étant intégrées à cet élément (par programme ou définies dans l'attribut style de l'élément). Vous devez obtenir le style calculé.

Il n’est pas si facile de le faire de manière inter-navigateur, IE a sa propre manière, via la propriété element.currentStyle, et la méthode standard DOM niveau 2, implémentée par d’autres navigateurs, se fait par le biais de document.defaultView. Méthode getComputedStyle.

Les deux manières ont des différences, par exemple, la propriété IE element.currentStyle s'attend à ce que vous accédiez aux noms de propriété CSS composés de deux mots ou plus dans camelCase (par exemple, maxHeight, fontSize, backgroundColor, etc.); les propriétés avec les mots séparés par des tirets (par exemple, hauteur maximale, taille de police, couleur d'arrière-plan, etc.) .......

function getStyle(el, styleProp) {
    var value, defaultView = (el.ownerDocument || document).defaultView;
    // W3C standard way:
    if (defaultView && defaultView.getComputedStyle) {
        // sanitize property name to css notation
        // (hyphen separated words eg. font-Size)
        styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
        return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
    } else if (el.currentStyle) { // IE
        // sanitize property name to camelCase
        styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
            return letter.toUpperCase();
        });
        value = el.currentStyle[styleProp];
        // convert other units to pixels on IE
        if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
            return (function(value) {
                var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
                el.runtimeStyle.left = el.currentStyle.left;
                el.style.left = value || 0;
                value = el.style.pixelLeft + "px";
                el.style.left = oldLeft;
                el.runtimeStyle.left = oldRsLeft;
                return value;
            })(value);
        }
        return value;
    }
}

Principale pile stackoverflow

23
Amir Movahedi

Utilisez le suivant. Ça m'a aidé.

document.getElementById('image_1').offsetTop

Voir aussi Obtenir les styles.

20
user843938

Solution inter-navigateur pour vérifier les valeurs CSS sans manipulation DOM:

function getStyleRuleValue(style, selector) {
    for (var i = 0; i < document.styleSheets.length; i++) {
        var mysheet = document.styleSheets[i];
        var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
        for (var j = 0; j < myrules.length; j++) {
            if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector) {
                return myrules[j].style[style];
            }
        }

    }
};

Usage:

getStyleRuleValue('backgroundColor', '.chart-color')

version assainie (force l'entrée du sélecteur en minuscule, et permet un cas d'utilisation sans majuscule ".")

function getStyleRuleValue(style, selector) {
var selector_compare=selector.toLowerCase();
var selector_compare2= selector_compare.substr(0,1)==='.' ?  selector_compare.substr(1) : '.'+selector_compare;

for (var i = 0; i < document.styleSheets.length; i++) {
    var mysheet = document.styleSheets[i];
    var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
    for (var j = 0; j < myrules.length; j++) {
        if (myrules[j].selectorText) {
            var check = myrules[j].selectorText.toLowerCase();
            switch (check) {
                case selector_compare  :
                case selector_compare2 : return myrules[j].style[style];
            }
        }
    }

}

}

13
karolf

Si vous le définissez par programme, vous pouvez simplement l'appeler comme une variable (c'est-à-dire document.getElementById('image_1').style.top). Sinon, vous pouvez toujours utiliser jQuery:

<html>
    <body>
        <div id="test" style="height: 100px;">Test</div>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            alert($("#test").css("height"));
        </script>
    </body>
</html>
7
adotout

Si vous êtes dans les bibliothèques, pourquoi pas MyLibrary et getStyle .

La méthode jQuery css est mal nommée. CSS n'est qu'un moyen de définir des styles et ne représente pas nécessairement les valeurs réelles des propriétés de style d'un élément.

2
RobG

Pour des raisons de sécurité, vous pouvez vérifier que l’élément existe avant de tenter de le lire. S'il n'existe pas, votre code lève une exception, ce qui arrêtera l'exécution sur le reste de votre JavaScript et affichera éventuellement un message d'erreur à l'utilisateur - ce qui n'est pas bien. Vous voulez pouvoir échouer gracieusement.

var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
  height = item.style.height;
  width = item.style.width;
  top = item.style.top;
  margin = item.style.margin;
} else {
  // Fail gracefully here
}
1
BryanH

La solution inter-navigateurs sans manipulation DOM donnée ci-dessus ne fonctionne pas car elle donne la première règle correspondante, pas la dernière. La dernière règle correspondante est celle qui s'applique. Voici une version de travail:

function getStyleRuleValue(style, selector) {
  let value = null;
  for (let i = 0; i < document.styleSheets.length; i++) {
    const mysheet = document.styleSheets[i];
    const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
    for (let j = 0; j < myrules.length; j++) {
      if (myrules[j].selectorText && 
          myrules[j].selectorText.toLowerCase() === selector) {
        value =  myrules[j].style[style];
      }
    }
  }
  return value;
}

Cependant, cette recherche simple ne fonctionnera pas dans le cas de sélecteurs complexes.

0
jcdufourd