Question

I have a linked stylesheet with the following:

.dirContent {width: 190px, padding: 10px;)

I am running this script:

var npad = $(".dirContent").css("padding");
alert(npad);

…But it doesn’t work – it returns a blank alert box. Now if I run this script:

var npad = $(".dirContent").css("width");
alert(npad);

It returns “190px”, the alert displays the correct value.

Thoughts?

Answer 1

Two problems I see:

• malformed CSS (covered in other answers)
• inconsistent handling of shorthand properties

Essentially, retrieving shorthand properties works inconsistently across browsers. In Chrome, querying the “padding” property returns a single part string (“1px”) if all 4 sides are padded equally, and a 4 part (“1px 2px 3px 4px”) string if the padding is different on any of the sides.

But IE9 returns nothing. Firefox 18 returns nothing.

var npad = $(".dirContent").css("padding");
alert(npad);
npad = $(".dirContent").css("padding-left");
alert(npad);

Try this sample in a few browsers and you should see the difference: http://jsfiddle.net/XDL3N/1/

If you think about it, this behavior makes sense. While shorthand is great for setting properties, it’s far less useful for getting them. You would need to parse the multi-segment string to do anything useful with it.