2011-11-07 11 views
6

Questo dovrebbe essere un problema molto semplice, ma non riesco a capire cosa sto facendo male. Sto cercando di accedere alla proprietà CSS 'border-bottom' in questo modo:jQuery- .css() non funziona per un input

var temp = $('#divName').css('border-bottom'); 

Purtroppo, dopo questo, temperatura contiene la stringa ""

Qualcuno sa perché questo non funziona o che cosa devo fare in modo diverso per farlo funzionare? Grazie.

+0

hai provato 'borderBottom'? –

+0

'# divName' contiene già la proprietà' border-bottom'? – Sparky

risposta

8

Gli stili devono essere più specifico . Poiché border-bottom è una proprietà breve per altre proprietà (simile a background, per denominare una comune), la proprietà deve essere esplicitamente indicata.

var elem = $('#divName'); 
var border_width = elem.css('border-bottom-width'); 
var border_color = elem.css('border-bottom-color'); 
var border_style = elem.css('border-bottom-style'); 
var border_bottom = border_width + " " + border_color + " " + border_style; 

Fiddle: http://jsfiddle.net/6wRj4/
Vedi anche: MDN: border-bottom short-hand.

+0

Potrebbe valere la pena ricordare che questo * non * è considerato un bug in jQuery. jQuery riporta gli attributi CSS esattamente come il browser li restituisce, e diversi browser a volte restituiscono risposte diverse per lo stesso documento HTML. – Blazemonger

+0

Infatti, vengono utilizzati i metodi 'window.computedStyle()' e 'element.currentStyle []' (IE). Alcuni valori sono modificati da jQuery, per mostrare lo stesso risultato su diversi browser. –

+0

Ahh. Ora ha molto senso. Ho visto qualcosa di simile nei documenti di Jquery, ma non ho messo insieme 2 e 2. Grazie. – gabaum10

2

Verificare che $ ('# divName') selezioni un singolo elemento. È possibile utilizzare la sintassi dell'array su un oggetto jquery per recuperare l'oggetto DOM sottostante. Dovresti anche controllare (ad esempio, usando Firebug) per assicurarti che l'elemento DOM che stai guardando abbia lo stile che stai cercando.

Se entrambe le cose funzionano correttamente, si potrebbe provare a utilizzare le proprietà del bordo più granulari ...-bottom-stile del bordo, border-bottom-width, ecc

0

Provare con document.getElementById("divName").style.borderBottom;.