Получение значения границы CSS с помощью jQuery в Firefox 14.0.1

Я запускаю следующий код в консоли Firebug.

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

Появляются красные границы изображения, но он возвращает пустую строку, почему это?

Он отлично работает в инструментах разработчика Chrome и Safari.

Обновление. Документы jQuery говорят, что стрические свойства не поддерживаются при получении значений CSS. Однако я также попробовал следующее без везения в Firefox (все работают в Chrome и Safari)

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

Ответы

Ответ 1

Цитирование .css.

Сокращенные свойства CSS (например, margin, background, border) не поддерживаются. Например, если вы хотите получить рендерную маржу, используйте: $(elem).css('marginTop') и $(elem).css('marginRight') и т.д.

В случае border вам нужно использовать связанные свойства border-width, border-style и border-color.

например. 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');

Ответ 2

Попробуйте следующее:

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

FIDDLE

Ответ 3

Поддерживаемые свойства в 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'

Являются ли поддерживаемые longhands:) Cheers! Наслаждайтесь!!!

В большинстве случаев вы можете использовать сокращение, чтобы установить границу.

Если вы уверены, что они одинаковы, сделайте что-то вроде

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

чтобы получить строку типа "2px solid rgb(255,255,255)'

Ответ 4

Возможно, вы пытаетесь использовать несколько свойств используйте следующий синтаксис

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

сокращенное свойство, не поддерживаемое в JQuery.

Ответ 5

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

Не только для top, он также применим для right, left и bottom.

Это также неработающий код:

objImage.css('border-style');

Так как border, margin, padding свойства CSS редактируются отдельно. Если border-top отличается от border-left, браузер может быть сбит с толку, который он должен вернуть, когда вы только что запросили border.