Conditional operators on css values using jQuery

Question

I am trying this:

if($("#img").css("left")>=100)

but it always returns false because $("#img").css("left") returns "200px" as a string.

CodingIntrigue · Accepted Answer · 2015-05-04 09:05:39Z

2

parseInt will convert the string into an integer for you:

if(parseInt($("#img").css("left"), 10)>=100)

answered May 4, 2015 at 9:05

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

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

3 Comments

Mohamed Khamis Over a year ago

In case anyone was wondering, the second parameter is to define which numeral system to use, in that case base 10 numerals.

CodingIntrigue Over a year ago

@MohamedKhamis Correct. Not sure that $("#img").css("left") would ever return prefixed numbers, but better safe than sorry :)

Linga Over a year ago

@RGraham better you add the explanation. Anyway I already +1 this

Mohamed Khamis · Accepted Answer · 2015-05-04 09:04:27Z

1

A temporary solution is to use this function that returns the value of the css attribute, excluding the "px":

function getCSSval(str){
    return parseInt(str.substring(0, str.length - 2));
    //e.g. "200px" --> "200"
}

But I was hoping there could be a more straight forward way

answered May 4, 2015 at 9:04

Mohamed Khamis

8,06910 gold badges42 silver badges60 bronze badges

Comments

Alexander Bondar · Accepted Answer · 2015-05-04 09:07:04Z

1

You need to parse the returned value to an integer to compare it with 100:

if (parseInt($("#img").css("left"), 10) >= 100)

answered May 4, 2015 at 9:07

Alexander Bondar

5444 silver badges21 bronze badges

Comments

Linga · Accepted Answer · 2015-05-04 09:08:45Z

1

The most efficient code to get the integer part is the use of regular expressions

if(parseInt($("#img").css("left").replace(/\s?px/i, "")) >= 100)

answered May 4, 2015 at 9:08

Linga

10.6k10 gold badges57 silver badges109 bronze badges

Collectives™ on Stack Overflow

Conditional operators on css values using jQuery

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related