jQuery get css properties based on regex

Question

I'm trying to build some custom js for an app, and I've got to a point where I need to replicate some css styles from a parent item.

...
match_properties: ['background-color', 'border-radius', 'margin'],
...

var custom_css = [];
$(params['match_properties']).each(function(i, v) {
    custom_css.push(v+': '+$(params['object']).css(v));
});
custom_css = custom_css.join('; ');

css_properties = css_properties + custom_css + ';';

Is there anyway from jQuery to get all the 'border-radius' properties from an item ('moz-border-radius', 'webkit....')?

The point is, not to do something like the following, by hand

if(params['match_properties']['border-radius']) {
    custom_css.push('-moz-border-radius: '+$(params['object'].css('-moz-border-radius')))
    custom_css.push('-webkit-border-radius: '+$(params['object'].css('-webkit-border-radius')))
}

and the reason not to do so, because it would be much more efficient to just pass the 'border-radius', 'box-shadow', or what ever and get all the properties related

@user1737909 I'm sorry, but what are you referring to, because I don't get it? — Alex
– Alex, Commented May 27, 2013 at 15:03
@user1737909 you propose to use it this way: $.each($(params['match_properties']), function(i, v){}) ? Why? — Alex
– Alex, Commented May 27, 2013 at 15:18
I propose it this way : $.each(params['match_properties'], function(){}); — Ven
– Ven, Commented May 27, 2013 at 15:20

Pointy · Accepted Answer · 2013-05-27 14:58:15Z

1

In jQuery 1.9 and later:

var props = $('whatever').css(['background-color', 'width', 'font-size']);

That returns an object with properties corresponding to the CSS properties you asked for.

answered May 27, 2013 at 14:58

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

5 Comments

Alex Over a year ago

including '-moz-...', '-webkit-...' if I pass something like 'box-shadow' ?

Pointy Over a year ago

@w0rldart no, I don't think it'll do that; jQuery doesn't make any attempt to keep track of those things. If you explicitly ask for them, however, I suspect it'd work.

Pointy Over a year ago

@w0rldart you could always write a little filter function that'd take an array of property names and apply prefix expansions for things like "box-shadow" and "transition".

Alex Over a year ago

ok, I understand... in that case, your answer only helps me improve my code, by writing less, and thank you for that

Alex Over a year ago

yea, that's what I'm trying now

Alex · Accepted Answer · 2013-05-27 17:48:11Z

I ended up doing this:

var custom_css = [];
$.each($(params['match_properties']), function(i, v) {
    custom_css.push(selectr($(params['object']), v));
});
custom_css = custom_css.join('; ');


function selectr(element, selector) {
    var selectors = {
        browser: ['border-radius', 'box-shadow'],
        shorthand: ['margin', 'border'],
    }

    var my_css = [];

    if($.inArray(selector, selectors.browser) > -1)
    {
        my_css.push('-webkit-'+selector+': '+$(element).css('-webkit-'+selector));
        my_css.push('-moz-'+selector+': '+$(element).css('-moz-'+selector));
        my_css.push(selector+': '+$(element).css(selector));
    }
    else if($.inArray(selector, selectors.shorthand) > -1)
    {
        my_css.push(selector+': ' + 
            $(element).css(selector+'-top') + ' ' +
            $(element).css(selector+'-right') + ' ' +
            $(element).css(selector+'-bottom') + ' ' +
            $(element).css(selector+'-left')
        );
    }
    else
    {
        my_css.push(selector+': '+$(element).css(selector));
    }

    return my_css;
}

Collectives™ on Stack Overflow

jQuery get css properties based on regex

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related