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');

Answer 2

Try this:

var border = $('img').css('border', '2px solid red')[0].style.border;

FIDDLE

Answer 3

Supported properties in firefox:

'border-top-color'
'border-right-color'
'border-bottom-color'
'border-left-color'

'border-top-width'
'border-right-width'
'border-bottom-width'
'border-left-width'

'border-top-style'
'border-right-style'
'border-bottom-style'
'border-left-style'

Are the supported longhands :) Cheers! Enjoy!!!

You can still use shorthand to set border in most cases.

If you are sure they are the same do something like

var borderString = $('img').css('border-top-width') + " " 
                 + $('img').css('border-top-style') + " " 
                 + $('img').css('border-top-color');

to get the string like "2px solid rgb(255,255,255)'