Obtener el valor de borde CSS con jQuery en Firefox 14.0.1

Question

Ejecuto el siguiente código en la consola de Firebug.

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

Aparecen los bordes rojos de la imagen, pero devuelve una cadena vacía, ¿por qué es esto?

Funciona bien en las herramientas de desarrollo de Chrome y Safari.

Actualización: los documentos jQuery dicen que las propiedades abreviadas no son compatibles cuando se obtienen valores CSS. Sin embargo también he intentado lo siguiente sin suerte en Firefox (Todo el trabajo en Chrome y 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

Citando .css docs.

propiedades abreviadas CSS (por ejemplo, margen, fondo, fronterizas) no son compatibles. Por ejemplo, si desea recuperar el margen representado, use: $(elem).css('marginTop') y $(elem).css('marginRight'), y así sucesivamente.

Para el caso de border, es necesario utilizar los border-width, border-style y border-color propiedades relacionadas.

p. Ej. 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

propiedades soportadas en 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' 

son los longhands apoyados :) Saludos! ¡¡¡Disfrutar!!!

Todavía puede usar la abreviatura para establecer el borde en la mayoría de los casos.

Si está seguro de que son los mismos hacer algo como

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

para obtener la cadena como "2px solid rgb(255,255,255)'

Answer 3

Tal vez están tratando de utilizar múltiples propiedades utilizan la siguiente sintaxis

$ ('img'). css ({'borde': 'sólido 2px rojo', 'color': 'verde'})

la propiedad taquigráfica no es compatible ordenado en Jquery.

Answer 4

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

No sólo para top, también es aplicable para right, left y bottom.

Este es también un código que no funciona:

objImage.css('border-style'); 

Desde border, margin, padding propiedades de CSS es separado editable.Si border-top es diferente de border-left, el navegador puede confundirse y debe devolverse cuando acaba de solicitar border.

Answer 5

Prueba esto:

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

FIDDLE