jquery extract values from css

Question

How do I extract a style property

<div id="clipProperty" style="clip: rect(0px 281px 647px 0px);"></div>

and append it to # getClipVaalues with 30 subtracted from the the second value 281, so it says clip: rect(0px 251px 647px 0px) ?

 <div id="getClipValues"></div>

This is my js code

var clipProperty = $('#clipProperty').attr('style');
$('#getClipValues').attr('style', clipProperty);

The property of clipProperty is not constant, but changes regularly. But I always need to subtract 30 from the second value.

"Want to..." is not a question. Can you add an actual question? With a question mark? — Chrismas007
– Chrismas007, Commented Dec 15, 2014 at 14:52

j08691 · Accepted Answer · 2014-12-15 15:10:15Z

3

This would do it:

var re = /rect\((\d+)px (\d+)px (\d+)px (\d+)px\)/;
var oldClip = $('#clipProperty').css('clip');
var newClipVal = oldClip.replace(re, "$2");
$('#getClipValues').css('clip','rect(0px '+(newClipVal-30)+'px 647px 0px)');

answered Dec 15, 2014 at 15:10

j08691

208k33 gold badges269 silver badges281 bronze badges

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

4 Comments

Newcoma Over a year ago

I should have mentioned, the value of #clipProperty is not constant so I need to calculate whatever oldClip is.

Newcoma Over a year ago

it is not working in IE 10. newClipVal is returning rect(0px, 766px, 842px, 0px) in stead of just 766px. Do you know why?

j08691 Over a year ago

Other than IE being a steaming pike of turd, no. Seems to have something to do with the replace(). Looks like IE separates the values with commas while everyone else uses spaces. Looking into a fix.

j08691 Over a year ago

Try changing the first line to var re = /rect\((\d+)px,* (\d+)px,* (\d+)px,* (\d+)px\)/;. Worked for me in IE10.

dhershman · Accepted Answer · 2014-12-15 15:04:41Z

0

Are you looking for something like this:

var clip = $('#clipProperty').attr('style'); 

var clip2 = $('#getClipValues').css('clip', 'rect(0px 231px 647px 0px');

I made a little jsFiddle with it to get a result: http://jsfiddle.net/jtu5y1te/1/

answered Dec 15, 2014 at 15:04

dhershman

3412 silver badges13 bronze badges

Collectives™ on Stack Overflow

jquery extract values from css

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related