CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
gabaum10
gabaum10

Reputation: 3827

jQuery- .css() not working for an input

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.

Upvotes: 6

Views: 306

Answers (3)

jsonx
jsonx

Reputation: 1090

Try with document.getElementById("divName").style.borderBottom;.

Upvotes: 0

Rob W
Rob W

Reputation: 349042

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.

Upvotes: 8

RMorrisey
RMorrisey

Reputation: 7739

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.

Upvotes: 2

Related Questions