Getting CSS border value with jQuery in Firefox 14

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

var objImage = $('img').css('border', 'solid 2px red');
objImage.css('border-top-color');
objImage.css('border-top-width');
objImage.css('border-top-style');

Not just for top, it is also applicable for right, left, and bottom.

This is also a non-working code :

objImage.css('border-style');

Since border, margin, padding properties of CSS is seperately editable. If border-top is different than border-left, browser may be confused which it must return when you just asked border.

Answer 2

Try this:

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

FIDDLE

Answer 3

Perhaps you are trying to use multiple properties use the following syntax

$('img').css({'border':'solid 2px red','color':'green'})

the shorthand property not supported in Jquery.

Answer 4

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 5

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