Question

我在这里创建了一个codePen（http://codepen.io/anon/pen/pwoEJ）

document.querySelector（ '＃框'）。style.left

这行代码似乎没有返回正确的值？它给了我“”空字符串。

Answer 1

使用getComputedStyle：

document.defaultView.getComputedStyle(document.querySelector('#box')).left

Answer 2

尝试这样的事情，http://codepen.io/anon/pen/BjfGu

window.getComputedStyle(document.getElementById('box'),null).getPropertyValue('left');

Answer 3

这取决于您希望代码跨浏览器的方式。

getComputedStyle在IE8中不可用（不确定它是否适用于IE9）

此外，样式可能已经以编程方式设置，在这种情况下，您将在element.style对象中找到值。

最后，虽然getComputedStyle接受类似CSS的标识符（例如z-index），但访问样式元素的其他方式使用了camelized名称（例如zIndex）。

最后，更通用的解决方案远非微不足道：

getStyle = function getStyle (el, property) 
{
    var style;
    if(document.defaultView && document.defaultView.getComputedStyle)
    {
       style = document.defaultView.getComputedStyle(el, "")
              .getPropertyValue (property);
    if (style) return style;
    }
    property = Camelize (property); // this is for older IE versions
    if (el.currentStyle) style = el.currentStyle[property];

    return style || el.style[property]
}

function Camelize (string)
{
    var oStringList = string.split('-');
    if (oStringList.length == 1) return oStringList[0];

    var camelizedString = string.indexOf('-') == 0
        ? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1)
        : oStringList[0];

    for (var i = 1, len = oStringList.length; i < len; i++)
    {
        var s = oStringList[i];
        camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
    }
    return camelizedString;
}

（此代码适用于Bernard Sumption出色的Animator.js库的可读性）

如何在RAW JavaScript中获取元素的左/顶属性？

3 个答案: