0

我有一个快速的问题。如果我想将样式左/右值与另一个坐标（比如说鼠标）进行比较，我该怎么做？

这是我在没有鼠标坐标的情况下尝试过的，但由于某种原因，我的条件永远不会执行......

<style>
    #container
    {
        position:absolute;
        left:400px;
        top:200px;
    }
</style>

<script>
function moveExit(){    
    var containerId = document.getElementById("container").style;

    if(containerId.left == 400 + "px")
        containerId.left = 395 + "px";  
}
</script>

这是我的身体：

<body>
    <div id="container">
    <img
    src="Images/image.jpg"
    onmouseover="moveExit();"
    />
    </div>
</body>

这是我第一次玩javascript ..谢谢！

4

3 回答 3

6

为此，您需要使用计算样式。

如何获得计算样式？

var left = window.getComputedStyle(document.getElementById("container")).left

对于 IE8，您必须使用 currentStyle 属性，因为不支持计算样式。

document.getElementById("container").currentStyle.left

使用 Javascript 的跨浏览器（IE8-）getComputedStyle？

于 2013-07-30T20:28:52.890 回答
0

尝试这样的事情：

http://jsfiddle.net/xtJA4/

$(document).ready( function() {
    $("#container").mouseleave(function() {
        if ($(this).css("left")=="400px") {
            alert("Left = 400px");
        }
    });
});

当然可以对此进行更改，但是对于您需要的内容，这应该可以正常工作。您当然可以更改 alert() 函数以匹配您需要的内容（修改左侧偏移量），但希望这会有所帮助！

于 2013-07-30T20:33:24.390 回答
0

虽然我不能 100% 确定您到底想要完成什么，但这里有一些评论和对您的代码的建议。

而不是用户 javascript，我会使用 jQuery。这是大卫之前提出的建议。jQuery 的一大优势是它可以解决大多数浏览器不兼容问题。

要使用 jQuery 执行此操作，您需要导入 jquery，然后您可以像这样使用它：

<script type="text/javascript" src="./jquery/jquery.js"></script>

<script type="text/javascript">
    function moveExit(){
        var $element = jQuery('#container');

        $element.css('left', '350px');
    }
</script>

另请注意，我已将“类型”属性添加到脚本元素中。

作为旁注，我还要提醒您将“alt”属性添加到 img 元素。有利于可访问性以及图像因任何原因被阻止时。

对您要完成的工作有更深入的了解，可以提供更好的答案。

于 2013-07-30T20:53:48.983 回答