jQuery- .css() not working for an input

Question

This should be a really simple problem, but I can't quite figure out what I am doing wrong. I am trying to access the CSS property 'border-bottom' like this:

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

Unfortunately, after this, temp contains the string ""

Does anyone know why this is not working or what I should do differently to make it function? Thanks.

Answer 1

The styles have to be more specific. Since border-bottom is a short-property for other properties (similar to background, to name a common one), the property has to be explicitly given.

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/
See also: MDN: border-bottom short-hand.

Answer 2

Check to ensure that $('#divName') does select a single element. You can use array syntax on a jquery object to get back the underlying DOM object. You should also check (for example, using Firebug) to make sure that the DOM element you're looking at does have the style that you're looking for.

If both of those things are working correctly, you might try using the more granular border properties... border-bottom-style, border-bottom-width, etc.