Obtenir une valeur CSS avec JavaScript

Question

Je sais que je peux set une valeur CSS via JavaScript, par exemple :

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

Mais, est-ce que je peux obtenir une valeur de style spécifique actuelle ? J'ai lu que je pouvais obtenir le style complet de l'élément, mais je ne veux pas avoir à analyser toute la chaîne de caractères si ce n'est pas nécessaire.

Answer 1

Vous pouvez utiliser getComputedStyle() .

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

jsFiddle .

Answer 2

La propriété element.style vous permet de connaître uniquement les propriétés CSS qui ont été définies comme inline dans cet élément (de manière programmatique, 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 d'une manière inter-navigateurs, IE a sa propre manière, à travers la propriété element.currentStyle, et la manière standard DOM Level 2, implémentée par les autres navigateurs est à travers la méthode document.defaultView.getComputedStyle.

Les deux méthodes présentent des différences, par exemple, la propriété IE element.currentStyle s'attend à ce que vous accédiez aux noms de propriétés CSS composés de deux mots ou plus en majuscules (par exemple maxHeight, fontSize, backgroundColor, etc.), la méthode standard s'attend aux propriétés avec les mots séparés par des tirets (par exemple max-height, font-size, background-color, 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;
    }
}

Référence principale stackoverflow

Answer 3

Utilisez ce qui suit. Cela m'a aidé.

document.getElementById('image_1').offsetTop

Voir aussi Obtenir des styles .

Answer 4

Solution multi-navigateurs pour vérifier les valeurs CSS sans manipulation du 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];
   }
  }
 }
};

Utilisation :

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

Version assainie (force l'entrée du sélecteur à être en minuscules, et permet l'utilisation du cas sans le premier ".")

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];
     }
    }
   }
  }
 }

Answer 5

Si vous le définissez de manière programmatique, 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>