CODEWITHSUNDEEP
javascriptjquerycssregex
Alex
Alex

Reputation: 7688

jQuery get css properties based on regex

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

Upvotes: 1

Views: 131

Answers (2)

Alex
Alex

Reputation: 7688

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;
}

Upvotes: 0

Pointy
Pointy

Reputation: 413702

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.

Upvotes: 1

Related Questions