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
– Chris Nielsen, Commented Jul 30, 2013 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
– Brett Weber, Commented Jul 30, 2013 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
– Zain1291, Commented Jul 30, 2013 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
– Chris Nielsen, Commented Jul 31, 2013 at 16:55

Community · Accepted Answer · 2017-05-23 11:56:36Z

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, 2017 at 11:56

CommunityBot

11 silver badge

answered Jul 30, 2013 at 20:28

gaurang171

9,1104 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zain1291 Over a year ago

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

David Zukowski · Accepted Answer · 2013-07-30 20:33:24Z

0

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!

answered Jul 30, 2013 at 20:33

David Zukowski

212 bronze badges

Comments

Sigh · Accepted Answer · 2013-07-30 20:53:48Z

0

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.

answered Jul 30, 2013 at 20:53

Sigh

11 silver badge2 bronze badges

1 Comment

Zain1291 Over a year ago

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!

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related