使用 JavaScript 获得最高边距

Question

我需要使用 JavaScript 获取 input 中的 margin-top。这是运行良好的 jQuery 代码：

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

但我需要纯 Javascript，我尝试了以下代码，但没有成功

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

如何让它在纯 JavaScript 中工作？

Answer 1

我刚刚找到了解决办法：

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

Answer 2

这是来自 jQuery 的 curCSS 的独立版本。请注意我为降低代码大小所做的编辑。到目前为止，它还没有给我带来任何问题。

//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){};
        }
    }
})();