Question

我有一个简单的问题。如果我想比较一个样式左/右值和另一个坐标（比如鼠标）我该怎么做？

这是我在没有鼠标坐标的情况下尝试的但是出于某种原因，我的情况从未执行过......

<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 ..谢谢！

Answer 1

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

How do I get a computed style?

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

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

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

Cross-browser (IE8-) getComputedStyle with Javascript?

Answer 2

尝试这样的事情：

http://jsfiddle.net/xtJA4/

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

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

Answer 3

虽然我不能100％确定您要完成的是什么，但这里有一些评论和建议。

我会使用jQuery 而不是用户javascript。这是David之前建议的。 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>

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

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

通过更好地了解您想要实现的目标，可以提供更好的答案。

如果条件，我如何使用JavaScript比较CSS样式值？

3 个答案: