Uzyskiwanie wartości obramowania CSS za pomocą jQuery w Firefoksie 14.0.1

Question

Uruchom następujący kod w konsoli Firebug.

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

Pojawiają się czerwone obramowania obrazu, ale zwraca pusty ciąg, dlaczego tak jest?

Działa dobrze w narzędziach programistycznych Chrome i Safari.

Aktualizacja: Dokumentacja jQuery mówi, że skrócone właściwości nie są obsługiwane podczas pobierania wartości CSS. Jednak Próbowałem również następujące bez powodzenia w Firefox (wszystkie prace w Chrome i 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

Cytowanie .css docs.

właściwości Skrót CSS (na przykład margines tła, granicznej) nie są obsługiwane. Na przykład, jeśli chcesz odzyskać renderowany margines, użyj: $(elem).css('marginTop') i $(elem).css('marginRight') i tak dalej.

Dla przypadku border, trzeba użyć border-width, border-style i border-color związanych właściwości.

np. 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

Obsługiwane właściwości 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' 

są obsługiwane longhands :) Pozdrawiam! Cieszyć się!!!

W większości przypadków można nadal używać skrótów do ustawiania obramowania.

Jeżeli jesteś pewien, że są takie same zrobić coś

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

uzyskać ciąg jak "2px solid rgb(255,255,255)'

Answer 3

Może próbujesz używać wielu właściwości użyć następującej składni

. $ ('img') css ({ 'granica': 'stałe 2px czerwony', 'kolor': 'zielone'})

właściwość skrótowa nie supp orted w 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'); 

Nie tylko dla top, to ma również zastosowanie do right, left i bottom.

Jest to również kod zakaz pracy:

objImage.css('border-style'); 

Od border, margin, padding właściwości CSS jest oddzielnie edytowalne.Jeśli border-top jest inny niż border-left, przeglądarka może być zdezorientowana, co musi powrócić, gdy użytkownik właśnie zapytał: border.

Answer 5

Spróbuj tego:

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

FIDDLE