Question

当我从样式表中设置属性时，我无法访问JavaScript函数中一个图像元素的left属性，但是当我在图像标记上使用内联样式时，它可以正常工作。

这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <script type="text/javascript">
            function moveObjRight(obj) {
                var a = document.getElementById(obj);
                alert(a.style.left)
            }
        </script>
        <style type="text/css">
            #AS
            {
                top: 141px;
                left: 118px;
                position: absolute;
                height: 25px;
                width: 25px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <img alt="asd" src="pic 3-4.jpg" id="AS" />
                <input type="button" value="Button" onclick="javascript:moveObjRight('AS');" />
            </div>
        </form>
    </body>
</html>

Answer 1

您需要使用计算出的样式属性。这可以通过具有简单功能的跨浏览器方法来实现。请查看quirks mode以获取有关以下功能的说明。

function getStyle(el,styleProp) {
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

Answer 2

对于Mozilla Firefox，请检查documentation for img。

在Internet Explorer中，请参阅 <IMG> Property Pages Dialog Box 。

Answer 3

只是一个建议（不是答案），请使用jQuery！

您可以使用以下代码访问left属性。

$（ '＃yourdiv'）的CSS（ '左'）;

参考： .css()

为什么我不能在JavaScript函数中访问此CSS属性？

3 个答案: