Obtenez une valeur CSS avec JavaScript

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

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

Mais, puis-je obtenir une valeur de style spécifique actuelle? J'ai lu où je peux obtenir le style complet de l'élément, mais je ne veux pas avoir à analyser la chaîne entière si je ne le dois pas.

Vous pouvez utiliser getComputedStyle().

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

jsFiddle .

La propriété element.style vous permet de connaître uniquement les propriétés CSS qui ont été définies en ligne dans cet élément (par programme ou définies dans l'attribut style de l'élément), vous devez obtenir le style calculé.

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

Les deux façons ont des différences, par exemple, la propriété IE element.currentStyle attend 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.), la manière standard attend les propriétés avec le 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;
    }
}

Empilement de référence principal

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

document.getElementById('image_1').offsetTop

Voir aussi Obtenir des styles .

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

function get_style_rule_value(selector, style)
{
 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:

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

Version aseptisée (force l'entrée du sélecteur en minuscules et permet un cas d'utilisation sans signe ".")

function get_style_rule_value(selector, style)
{
 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];
     }
    }
   }
  }
 }

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>

Si vous aimez les bibliothèques, pourquoi pas MyLibrary et getStyle .

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

En 2020

vérifier avant utilisation

Vous pouvez utiliser computedStyleMap ()

La réponse est valide mais parfois vous devez vérifier quelle unité elle retourne, vous pouvez l'obtenir sans chaîne slice()ni substring()chaîne.

var element = document.querySelector('.js-header-rep');
element.computedStyleMap().get('padding-left');

var element = document.querySelector('.jsCSS');
var con = element.computedStyleMap().get('padding-left');
console.log(con);

.jsCSS {
  width: 10rem;
  height: 10rem;
  background-color: skyblue;
  padding-left: 10px;
}

<div class="jsCSS"></div>

Par mesure de sécurité, vous souhaiterez peut-être vérifier que l'élément existe avant d'essayer de le lire. S'il n'existe pas, votre code lèvera une exception, qui arrêtera l'exécution sur le reste de votre JavaScript et affichera potentiellement un message d'erreur à l'utilisateur - pas bon. 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
}

La solution multi-navigateur sans manipulation DOM donnée ci-dessus ne fonctionne pas car elle donne la première règle de correspondance, pas la dernière. La dernière règle de correspondance 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.