Get specific Inline CSS Style And Style Name

Question

I'm looking for a way to get specific inline css styles from an element, including the style name itself and the value.

I have an element that contains different inline styles like so.

<div style="background-color:red; display:block; background-size:cover; background-attachment:fixed; background-repeat:repeat-y; cursor:pointer; width:100%"></div>

I want to get the styles of that element(including the style name itself and value), but only the ones that have to do with "background" and ignore the others like "display, cursor, width"..etc

So to get the styles with jQuery I simply do this

$("div").attr("style");

That will return all the styles of the element including the ones I don't want. The solution I'm looking for would return something like this, which ignores the other styles that don't have to do with "background-"

background-color:red; background-size:cover; background-attachment:fixed; background-repeat:repeat-y;

I know I could get the individual styles like this

$("div").css("background");
$("div").css("background-size");

The problem with that is that it only gets the style value, and thats a problem because "background" could also be "background-image", or "background-repeat-y" could also be "background-repeat-x".

Answer 1

String manipulation is the wrong tool for this job, and I'm surprised that the other answers use it. The style element was designed for this task.

You can find a list of all inline styles by looking at element.style . The object looks like this:

You can see it contains each of the inline CSS rules separate from one another. Here is a very short live demo that prints this object to the console so you can see what I mean:

 var el = document.getElementById("thediv"); console.log(el.style); 

 <div id="thediv" style="background-color:red; display:block; background-size:cover; background-attachment:fixed; background-repeat:repeat-y; cursor:pointer; width:100%"></div> 

The object contains both an iterable list of rules (so for instance element.style[0] is background-color ), as well as a dictionary so that you can get at specific rules by name. You should then be able to easily filter this list to get any specific rules you're looking for.

---

Here is a live demo that shows you how you can get all of the rules with the string background in them (open up the console). It puts the results into an array of name and value pairs that's easy to access:

 var el = document.getElementById("thediv"); var result = []; for (var i = 0; i < el.style.length; i++) { if (el.style[i].indexOf("background") !== -1) { result.push({name: el.style[i], value: el.style[el.style[i]]}); } } console.log(result); 

 <div id="thediv" style="background-color:red; display:block; background-size:cover; background-attachment:fixed; background-repeat:repeat-y; cursor:pointer; width:100%"></div> 

Answer 2

You can do something like this:

$('div').each(function() {

style_arr=$(this).attr("style").split(';');
for(i=0;i<style_arr.length;i++) {
    if(style_arr[i].indexOf('background')!=-1) {
        console.log(style_arr[i]);
    }
}

});

Demo: http://jsfiddle.net/sx3psqvh/

Answer 3

I'd do something like the following:

$(document).ready(function(){
    var filteredStyles = $.grep($("div").attr("style").split(';'), function(style) {
        return style.indexOf("background") > -1;
    });
    console.log(filteredStyles);
});

http://jsfiddle.net/6he3hu6y/

Answer 4

You could do it like this:

var style = $("div").attr("style");
var arrayStyle = style.split(';');
var backgroundStyles = '';
for (i = 0; i < arrayStyle.length; ++i) {
    if (arrayStyle[i].indexOf("background") >= 0) {
        backgroundStyles+=arrayStyle[i]+';';
    }
}   
console.log(backgroundStyles);

First of all, you get the whole style attribute, then include all the CSS attributes splitting by the ";" into an array and finally for each key of the array looking for values containing "background". If so, just concat that value to a variable, adding ';' at the end of each value.