¿Cómo obtener los valores de estilo de un elemento HTML en javascript?

Solución:

los element.style La propiedad le permite conocer solo las propiedades CSS que se definieron como en línea en ese elemento (programáticamente o definido en el atributo de estilo del elemento), debe obtener el estilo calculado.

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

Las dos formas tienen diferencias, por ejemplo, el IE element.currentStyle propiedad espera que acceda a los nombres de propiedad CCS compuestos por dos o más palabras en el caso de Carmel (p.ej maxHeight, fontSize, backgroundColor, etc.), la forma estándar espera las propiedades con las palabras separadas por guiones (p. ej. max-height, font-size, background-color, etc.).

Además, el IE element.currentStyle devolverá todos los tamaños en la unidad que se especificaron (por ejemplo, 12pt, 50%, 5em), la forma estándar siempre calculará el tamaño real en píxeles.

Hace algún tiempo hice una función de navegador cruzado que le permite obtener los estilos calculados en una forma de navegador cruzado:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen 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;
  }
}

La función anterior no es perfecta para algunos casos, por ejemplo, para los colores, el método estándar devolverá colores en el rgb (…) notación, en IE los devolverán como se definieron.

Actualmente estoy trabajando en un artículo sobre el tema, puedes seguir los cambios que realizo en esta función aquí.

Creo que ahora puede usar Window.getComputedStyle ()

Documentación MDN

var style = window.getComputedStyle(element[, pseudoElt]);

Ejemplo para obtener el ancho de un elemento:

window.getComputedStyle(document.querySelector('#mainbar')).width

En jQuery, puedes hacer alert($("#theid").css("width")).

– si no ha echado un vistazo a jQuery, lo recomiendo encarecidamente; facilita muchas tareas sencillas de JavaScript.

Actualizar

para que conste, esta publicación tiene 5 años. La web se ha desarrollado, ha avanzado, etc. Hay formas de hacer esto con Plain Old Javascript, que es mejor.

---

---

Utiliza Nuestro Buscador