Reading CSS3 Values with jQuery

Question

Is there a way to read CSS3 values with jQuery? I've tried just using:

var test = $("#container").css("transition") // there, normal selector.

but I get "null" as the value, even though it's actually margin-left .5s. If I try -webkit-transition instead of transition (since I'm testing in Chrome), it doesn't give me any value.

If there's not a way to do this yet, that's alright, but I figured it was working asking. Maybe there's a plugin or something that I can use to do this? I basically need to change the transition after a certain number of slides and then change it back.

Your selector is peculiar. You should just do $("#container") since IDs have to be unique per page. — crush
– crush, Commented Feb 17, 2012 at 21:42
Actually, I believe you can nest ids (by putting elements inside of elements.) — summea
– summea, Commented Feb 17, 2012 at 21:44
Sure, you can nest them, but it is pointless to use a jQuery selector in this fashion. — crush
– crush, Commented Feb 17, 2012 at 21:45
Point's not the selector, I can easily change that, I was just using it that way for testing...It never causes any problems for me, I just like doing it that way so I can more easily see where things are happening. — JacobTheDev
– JacobTheDev, Commented Feb 17, 2012 at 21:55

John Flatness · Accepted Answer · 2012-02-17 21:59:42Z

2

transition is a shorthand property; it stands in for transition-property, transition-duration, transition-timing-function, and transition-delay.

jQuery's .css doesn't support getting the value of shorthand CSS properties, so you have to get each constituent part separately.

Something like

$('#container').css('-webkit-transition-property')

would give you just the margin-left part, for example.

edited Feb 17, 2012 at 21:59

answered Feb 17, 2012 at 21:54

John Flatness

34.1k5 gold badges81 silver badges81 bronze badges

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

1 Comment

JacobTheDev Over a year ago

Nice, didn't think of that. I think this is the method I'll end up using, assuming I can get it to work. This really simplifies my script, got absolutely no user set variables now :)

Niet the Dark Absol · Accepted Answer · 2012-02-17 21:45:11Z

1

Does plain JS work?

document.getElementById('container').style.webkitTransition
// or
getComputedStyle(document.getElementById('container')).webkitTransition

(Whether it works or not, it's over 500 times more efficient than the jQuery)

answered Feb 17, 2012 at 21:45

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

9 Comments

Jasper Over a year ago

over 500 times? Here's a JSPerf I made to demonstrate the difference between using .css() (jQuery) and element.style... (standard JS): jsperf.com/jquery-css-vs-element-style (more like 3-4 times faster).

Niet the Dark Absol Over a year ago

I'm mostly going by the number of operations required to do the same thing. Even the most basic operation in jQuery takes over two hundred commands when the same can be done in just three lines of JS.

Jasper Over a year ago

The point I was making is that saying it's over 500 times more efficient than the jQuery is not correct. 68% slower corresponds to about four times slower, not five-hundred times (that's an error of like 99%). If you mean 500% (or five times), that's different, but please update your answer to reflect that fact.

JacobTheDev Over a year ago

Possibely, but I am using all the vendor prefixes, so I'm not sure if that'll work or not. I'll definitely try it though.

Niet the Dark Absol Over a year ago

I realised that after my reply, so I changed it. It still proves the point that regular JS is overall much faster than jQuery. Sure, jQuery can make you "write less to do more", but at that cost I'd rather write my own code.

|

Collectives™ on Stack Overflow

Reading CSS3 Values with jQuery

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related