Get all background properties using javascript/jquery

Question

I have an element like:

<div style="background-color: #ffffff; background-image: url(image.jpg);></div>

The background properties are being set using jquery like so:

$('div').css('background-color', '#ffffff');

Once the various properties have been set I want to get them all out as a shorthand declaration. I was hoping that just by doing:

var background = $('div').css('background');

would work however it doesnt seem to.

Anybody got a solution to this?

The only thing I can come up with is doing string concatenation such as:

var background = $('div').css('background-color') + ' ' + $('div').css('background-image');

however this will be very messy and rquire a lot of checks as not all background variables are always set, such as position etc.

any thoughts how this can be done would be greatly appreciated!

@hsz from the jQuery docs: "Retrieval of shorthand CSS properties (e.g., margin, background, border), although functional with some browsers, is not guaranteed" — Pointy
– Pointy, Commented Jan 10, 2014 at 15:50
well im running the latest version of firefox and it returns an empty string for me. — Mike Oram
– Mike Oram, Commented Jan 10, 2014 at 15:53

Pointy · Accepted Answer · 2014-01-10 22:01:00Z

4

You can pass an array to the .css() method, and it'll return you an ~~array~~ object with the values of all the properties you asked for.

var backgroundStuff = [
  "background-color",
  "background-position",
  "background-repeat",
  // ...
];

var props = $(whatever).css( backgroundStuff );
alert(props["background-color"]); // whatever the background color is

This is a fairly new feature (version 1.9).

edited Jan 10, 2014 at 22:01

answered Jan 10, 2014 at 15:48

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

5 Comments

Mike Oram Over a year ago

setting the properties on the element is not the problem, its getting them out in shorthand when they are explicitly declared that doesnt work

Pointy Over a year ago

@MikeOram Right - this is about getting the properties out. The array you get back has each of the style property values in the same order as the input array.

Mike Oram Over a year ago

ah sorry i misread your answer first time around. what if i dont no the properties that are set, i just want all the ones that are present?

Pointy Over a year ago

@MikeOram First: I was wrong; the return value is an object with property names that correspond to the style property names; the values are the property values. It might depend on the browser what happens with unset properties; in Firefox, you seem to get the default value when you ask for a property that's not explicitly set in the on-element "style" or via CSS. (I think; it's tricky to tell for sure.)

Mike Oram Over a year ago

Yes this is what I found too. Trouble s this is unreliable cross browser. Thank you for your suggestion however I have decided to go a different route.

Mike Oram · Accepted Answer · 2014-01-13 08:22:06Z

1

Seeing as there does not appear to be a reliable cross browser solution to this, I have done the following to get around the problem.

I have set up an object like so:

var backgroundDefaults = {
    color: "#ffffff",
    image: "none",
    repeat: "repeat",
    position: "top left"
}

When the user changes one background property, such as the background colour, I use the object to set all the defaults on the element. By doing this it ensures that all the values that can be changed are always set and so I can reliably get them off the element using:

var background = $('div').css('background-color') + ' ' + $('div').css('background-image');

as mentioned in the original question.

answered Jan 13, 2014 at 8:22

Mike Oram

7658 silver badges22 bronze badges

Comments

Karl-André Gagnon · Accepted Answer · 2014-01-10 16:29:22Z

-1

To mix with Pointy answer, you can use regexp on the style attribute like this :

var attr = $('div').attr('style')
var theRegExp = (attr.match(/(?![\s;])*(background[\-a-z]*)/g)); //Will give an array of backgrounds properties

console.log($('div').css(Array.prototype.slice.call(theRegExp))) //Will give an object of properties

Fiddle : http://jsfiddle.net/hLdZH/

answered Jan 10, 2014 at 16:29

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Collectives™ on Stack Overflow

Get all background properties using javascript/jquery

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related