How to get a part of CSS code to JavaScript/jQuery?

Question

I have asked a question few days ago and I got a answer, that wasn't truly answering it but it gave me an idea... The code below was in that answer and I quite understood it after a moment...Except one part. I wanted to animate some radial gradients and that guy made a jQuery plugin that wasn't doing what I wanted but it at least was some base. So the part that I don't understand is the one with command

.match(\d+/g))

He somehow (if I am right) got the RGB from the gradient and than used it to animate between the two colors. I tried to find something on google and jQ documentation but I wasn't able to find something startable with.

So my question is how can I get some stuff out of CSS like parts of gradients etc.? I want to make a gradient animating plugin for jQuery but I can't until I figure out how to change only parts of css attribs without changing the whole one as the guy did.

-- His example

jQuery.fx.step.gradient = function(fx) {
if (fx.state == 0) { //On the start iteration, convert the colors to arrays for calculation.
    fx.start = fx.elem.style.background.match(/\d+/g); //Parse original state for numbers.  Tougher because radial gradients have more of them
    fx.start[0] = parseInt(fx.start[0]);
    fx.start[1] = parseInt(fx.start[1]);
    fx.start[2] = parseInt(fx.start[2]);
    fx.end = fx.end.match(/\d+/g);
    fx.end[0] = parseInt(fx.end[0]);
    fx.end[1] = parseInt(fx.end[1]);
    fx.end[2] = parseInt(fx.end[2]);
}

fx.elem.style.background = "-webkit-linear-gradient(rgb(" + [
    Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
    Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
    Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
    ].join(",") + ")," + "rgb(0,0,0))";
}

$(this).animate({"gradient": "rgb(0, 255, 0)"});

--David

If you can get a result from things like $(".selector").css("-webkit-radial-gradient"), you'd be in luck, but I have a feeling this wouldn't do much. — Bojangles
– Bojangles, Commented Sep 27, 2011 at 19:29

Terry · Accepted Answer · 2011-09-27 19:51:57Z

Well be careful, in his example the final code is actually

$(this).animate({"gradient": "rgb(" + c.join(",") + ")"});

You have what looks like a hard coded string in your question.

$.match() is a regex function that queries the object (fx.end or fx.elem.style.background) for the specified search string (/\d+/g). As he commented, he is parsing for numbers:

fx.start = fx.elem.style.background.match(/\d+/g); //Parse original state for numbers.  Tougher because radial gradients have more of them

A regex pattern matching guide (one of gazillions) can be found here.

As far as assigning CSS values, in the end they are just strings. So you can retrieve any CSS value you want and parse it and plug it back in.

$('#myobject').css('<css property name>')             // get value
$('#myobject').css('<css property name>', '<value'>)  // set value

The logic you will have to work out yourself but it looks like the gentleman above has already pointed you in the right direction.

Or rather than just set the CSS property for gradient, in your case it seems you'd be using the animate plugin in jQuery UI along with his "gradient" method which does the CSS insertion for you.

$(this).animate({"gradient" : "<your parsed/calculated gradient value>"});

Community · Accepted Answer · 2017-05-23 12:12:01Z

0

If you have a look at this JSFiddle, you'll see you can grab the gradient CSS for an element, however, it's the entire gradient definition instead of each value.

In the example above, FF6 spews out

-moz-radial-gradient(50% 50% 45deg, circle closest-side, rgb(255, 165, 0) 0%, rgb(255, 0, 0) 100%)

You could parse (sort of) with regex, but everyone writes their CSS differently so this would be pretty difficult.

There's a solution for setting the gradient, but not getting it. There should be good information in this answer.

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Sep 27, 2011 at 19:44

Bojangles

102k50 gold badges175 silver badges209 bronze badges

Collectives™ on Stack Overflow

How to get a part of CSS code to JavaScript/jQuery?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related