使用JavaScript获取顶部边距

Question

我需要用 JavaScript 获取一个 input 的 margin-top。下面是可以正常工作的 jQuery 代码：

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

但我需要纯JavaScript的代码，我已经尝试了以下代码，但没有成功

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

我该如何用纯JavaScript让它正常工作？

- Enve

---

可能是get Margins from a div javascript的重复问题。 - Marcel Gwerder

@MarcelGwerder — 这不是关于获取而是设置的问题，尽管标题是这样写的。 - Quentin

你确定文档中只有一个id为"input"的元素吗？ - Rick Suggs

可能是重复的问题：在 JavaScript 中访问元素时不透明度和样式未定义，但在 CSS 中已定义。 - Quentin

@Quentin 好的，是我漏看了，谢谢！ - Marcel Gwerder

你确定已经引用了jQuery库吗？ - Tim B James

Answer 1

我刚刚找到了一个解决方案：

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

- Enve

---

不幸的是，在IE<9中无法工作。过去我从jQuery源代码中提取了方法“curCSS”来支持所有浏览器，但这并不美观 :) - robC

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

- robC

---

非常适用于IE 8中的计算样式！但是您缺少一个变量：rposition = /^(top|right|bottom|left)$/;。 - Beejor