Obtenga un valor CSS con JavaScript

Sé que puedo establecer un valor CSS a través de JavaScript como:

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

Pero, ¿puedo obtener un valor de estilo específico actual? He leído dónde puedo obtener todo el estilo para el elemento, pero no quiero tener que analizar toda la cadena si no es necesario.

Puedes usar getComputedStyle().

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

jsFiddle .

La propiedad element.style le permite conocer solo las propiedades CSS que se definieron como en línea en ese elemento (mediante programación o definidas en el atributo de estilo del elemento), debe obtener el estilo calculado.

No es tan fácil hacerlo de forma cruzada, IE tiene su propio camino, a través de la propiedad element.currentStyle, y la forma estándar DOM Nivel 2, implementada por otros navegadores es a través del método document.defaultView.getComputedStyle.

Las dos formas tienen diferencias, por ejemplo, la propiedad IE element.currentStyle espera que acceda a los nombres de propiedad CSS compuestos de dos o más palabras en camelCase (por ejemplo, maxHeight, fontSize, backgroundColor, etc.), la forma estándar espera las propiedades con palabras separadas con guiones (por ejemplo, altura máxima, tamaño de fuente, color de fondo, 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;
    }
}

Referencia principal stackoverflow

Usa lo siguiente. Me ayudó.

document.getElementById('image_1').offsetTop

Consulte también Obtener estilos .

Solución de navegador cruzado para verificar valores CSS sin manipulación 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];
   }
  }
 }
};

Uso:

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

Versión desinfectada (fuerza la entrada del selector a minúsculas y permite el uso sin mayúsculas ".")

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 lo configura mediante programación, puede llamarlo como una variable (es decir document.getElementById('image_1').style.top). De lo contrario, siempre puede usar 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 te gustan las bibliotecas, ¿por qué no MyLibrary y getStyle? ?

El método jQuery css tiene un nombre incorrecto, CSS es solo una forma de establecer estilos y no necesariamente representa los valores reales de las propiedades de estilo de un elemento.

En 2020

verificar antes de usar

Puede usar computedStyleMap ()

La respuesta es válida, pero a veces necesita verificar qué unidad devuelve, puede obtenerla sin ninguna slice()o substring()cadena.

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>

Como cuestión de seguridad, es posible que desee comprobar que el elemento existe antes de intentar leerlo. Si no existe, su código arrojará una excepción, que detendrá la ejecución en el resto de su JavaScript y posiblemente mostrará un mensaje de error al usuario, lo cual no es bueno. Desea poder fallar con gracia.

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 solución de navegador cruzado sin la manipulación de DOM dada anteriormente no funciona porque proporciona la primera regla de coincidencia, no la última. La última regla coincidente es la que se aplica. Aquí hay una versión funcional:

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

Sin embargo, esta búsqueda simple no funcionará en el caso de selectores complejos.