How do I compare css style values using JavaScript if conditions?

Question

I got a quick question. If I want to compare a style left / right value with another coordinates (lets say mouse) how do I do it?

Here is what I tried without mouse coordinates but for some reason my condition never executes...

<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>

And here is my body:

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

This is my first time playing around with javascript.. Thanks!

Part of your problem is that `document.getElementById("container").style` will apply *only* to that element's actual `style` attribute. CSS properties set elsewhere (such as you have here) will not be visible using this method. The easiest thing here, I think, would be to use jQuery's `.position()` method to get and set the coordinates you are after. — Chris Nielsen, Jul 30 '13 at 20:28
In conjunction with @ChrisNielsen , if you haven't looked into a library such as jQuery, I would suggest doing so as you learn javascript. But remember.. jQuery is like a drug : use it, never abuse it, and certainly don't abuse it. — Brett Weber, Jul 30 '13 at 20:34
Thanks for the comments and I really liked the not abusing jQuery part :D. Is it possible to use jQuery variables in JavaScript? So lets say I have a class P and I get my positions with .position() then use if condition within javascript to change the positions? — Zain1291, Jul 30 '13 at 20:52
Yes, certainly. There is no such thing as a "jQuery variable." jQuery is a JavaScript library, written in JavaScript, and executed as JavaScript. Its variables _are_ JavaScript variables. It is not a separate language; just a bunch of useful functions and utilities that help smooth over some of the rough spots that come up in web development. There are a lot of rough spots. Use a library. — Chris Nielsen, Jul 31 '13 at 16:55

score 6 · Accepted Answer · edited May 23 '17 at 11:56

6

you need to use computed style for this purpose.

How do I get a computed style?

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

for IE8 you have to use currentStyle proeprty as computed style is not supported.

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

Cross-browser (IE8-) getComputedStyle with Javascript?

edited May 23 '17 at 11:56

Community

1
1

answered Jul 30 '13 at 20:28

gaurang171

9,032
4
28
30

ok I moved on to my next part in which I try to compare the mouse coordinates which I get from clientX and clientY. But I am not able to compare those coordinates again? something like this: if(left == mouse_x + "px") containerId.left = 200 + "px"; – Zain1291 Jul 30 '13 at 20:46

score 0 · Answer 2 · answered Jul 30 '13 at 20:33

Try something like this:

http://jsfiddle.net/xtJA4/

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

There are of course changes that can be made to this, but for what you're needing this should work fine. You can of course go and change the alert() function to match what you need (modifying the left offset), but hopefully this helps!

score 0 · Answer 3 · answered Jul 30 '13 at 20:53

While I'm not 100% sure what exactly you are looking to accomplish, here are a few comments, and suggestions for your code.

Rather than user javascript, I would use jQuery. This is something that David has suggested previously. One of the great advantages of jQuery is that it gets around most browser incompatibility issues.

To do this with jQuery you'll need to import jquery, and then you can use it like so:

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

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

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

Please also notice that I have added the "type" attribute to the script elements.

As a side-note I would also remind you to add "alt" attributes to img elements. Good for accessibility and for when the images are blocked for whatever reason.

With greater understanding about what you are trying to accomplish a better answer can be provided.

Hi, thanks for an answer. I am just trying to learn javascript by making a container like a div and moving it around when a user hover over it. Currently I just trying to achieve its movements. Now I have the mouse coordinates but I just want to compare that with the position of my image. Thanks again! — Zain1291, Jul 30 '13 at 20:59

How do I compare css style values using JavaScript if conditions?

3 Answers3