Solución:
Las propiedades en el style
objeto son solo los estilos aplicados directamente al elemento (por ejemplo, a través de un style
atributo o en código). Entonces .style.marginTop
solo tendrá algo si tiene algo asignado específicamente a ese elemento (no asignado a través de una hoja de estilo, etc.).
Para obtener el estilo calculado actual del objeto, utilice el currentStyle
propiedad (Microsoft) o el getComputedStyle
función (casi todos los demás).
Ejemplo:
var p = document.getElementById("target");
var style = p.currentStyle || window.getComputedStyle(p);
display("Current marginTop: " + style.marginTop);
Advertencia justa: lo que obtienes puede que no esté en píxeles. Por ejemplo, si ejecuto lo anterior en un p
elemento en IE9, vuelvo "1em"
.
Copia en vivo | Fuente
Además, puede crear su propio outerHeight
para elementos HTML. No sé si funciona en IE, pero funciona en Chrome. Quizás, pueda mejorar el código a continuación usando currentStyle
, sugerido en la respuesta anterior.
Object.defineProperty(Element.prototype, 'outerHeight', {
'get': function(){
var height = this.clientHeight;
var computedStyle = window.getComputedStyle(this);
height += parseInt(computedStyle.marginTop, 10);
height += parseInt(computedStyle.marginBottom, 10);
height += parseInt(computedStyle.borderTopWidth, 10);
height += parseInt(computedStyle.borderBottomWidth, 10);
return height;
}
});
Este fragmento de código le permite hacer algo como esto:
document.getElementById('foo').outerHeight
Según caniuse.com, getComputedStyle es compatible con los principales navegadores (IE, Chrome, Firefox).
Encontré algo muy útil en este sitio cuando buscaba una respuesta a esta pregunta. Puede consultarlo en http://www.codingforums.com/javascript-programming/230503-how-get-margin-left-value.html. La parte que me ayudó fue la siguiente:
/***
* get live runtime value of an element's css style
* http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element
* note: "styleName" is in CSS form (i.e. 'font-size', not 'fontSize').
***/
var getStyle = function(e, styleName) {
var styleValue = "";
if (document.defaultView && document.defaultView.getComputedStyle) {
styleValue = document.defaultView.getComputedStyle(e, "").getPropertyValue(styleName);
} else if (e.currentStyle) {
styleName = styleName.replace(/-(w)/g, function(strMatch, p1) {
return p1.toUpperCase();
});
styleValue = e.currentStyle[styleName];
}
return styleValue;
}
////////////////////////////////////
var e = document.getElementById('yourElement');
var marLeft = getStyle(e, 'margin-left');
console.log(marLeft); // 10px
#yourElement {
margin-left: 10px;
}
<div id="yourElement"></div>