html - Getting CSS border value with jQuery in Firefox 14.0.1

Question

I run the following code in the Firebug console.

$('img').css('border', 'solid 2px red').css('border');

The red image borders appear, but it returns an empty string, why is this?

It works fine in Chrome and Safari developer tools.

Update: The jQuery docs say that shorthand properties are not supported when getting CSS values. However I have also tried the following with no luck in Firefox (All work in Chrome and Safari)

$('img').css('border-style', 'solid').css('border-style');
$('img').css('borderStyle', 'solid').css('borderStyle');
$('img').css('border', 'solid 2px green').css('borderStyle');

Answer 1

Quoting .css docs.

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

For the case of border, you need to use the border-width, border-style and border-color related properties.

e.g. border-color:

$('img').css('border-top-color', 'red').css('borderTopColor');
$('img').css('border-right-color', 'red').css('borderRightColor');
$('img').css('border-bottom-color', 'red').css('borderBottomColor');
$('img').css('border-left-color', 'red').css('borderLeftColor');