Get margin top with JavaScript

Question

I need to get margin-top of an input with JavaScript. This is the jQuery code which works fine:

alert($("#input").css('margin-top'))

But I need it in pure Javascript, I have tried the following code with no luck

alert(document.getElementById('input').style.marginTop)

How can I make it work in pure JavaScript?

Answer 1

I just found a solution:

var style = window.getComputedStyle(document.getElementById('input'));
var marginTop = style.getPropertyValue('margin-top'); 
alert(marginTop);

Answer 2

Here is a stand-alone version of curCSS from jQuery. Please note the edit that I made to keep the code size down. It hasn't caused me any problems thus far.

//Get current CSS - from jQuery-1.9.0
var curCSS;

(function(){
    /*!
     * Copyright 2005, 2012 jQuery Foundation, Inc. and other contributors
     * Released under the MIT license
     * http://jquery.org/license
     */
    var getStyles, core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,
        rmargin = /^margin/, rnumnonpx = new RegExp( "^(" + core_pnum + ")(?!px)[a-z%]+$", "i" );
    if(window.getComputedStyle){
        getStyles = function(elem){return window.getComputedStyle( elem, null )};
        curCSS = function( elem, name, _computed ){
            var width, minWidth, maxWidth, computed = _computed || getStyles( elem ),
                ret = computed ? computed.getPropertyValue( name ) || computed[ name ] : undefined,
                style = elem.style;
            if( computed ){
                /* Edit - removed edge case as requires lots more jQuery code
                if ( ret === "" && !jQuery.contains( elem.ownerDocument, elem ) ) {ret = jQuery.style( elem, name )}*/
                if( rnumnonpx.test( ret ) && rmargin.test( name )){
                    width = style.width; minWidth = style.minWidth; maxWidth = style.maxWidth;
                    style.minWidth = style.maxWidth = style.width = ret; ret = computed.width;
                    style.width = width; style.minWidth = minWidth; style.maxWidth = maxWidth}}
            return ret;
        }
    }
    else if (document.documentElement.currentStyle){
        getStyles = function( elem ){return elem.currentStyle};
        curCSS = function( elem, name, _computed ){
            try{
                var left, rs, rsLeft, computed = _computed || getStyles( elem ),
                    ret = computed ? computed[ name ] : undefined, style = elem.style;
                if( ret == null && style && style[ name ] ) {ret = style[ name ]}
                if( rnumnonpx.test( ret ) && !rposition.test( name ) ) {
                    left = style.left; rs = elem.runtimeStyle;rsLeft = rs && rs.left;
                    if ( rsLeft ) {rs.left = elem.currentStyle.left}
                    style.left = name === "fontSize" ? "1em" : ret; ret = style.pixelLeft + "px";
                    style.left = left; if ( rsLeft ) {rs.left = rsLeft}}
                return ret === "" ? "auto" : ret
            }
            catch(e){};
        }
    }
})();