jQuery- .css() issue 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?

Does #divName already contain the border-bottom property? — Sparky
– Sparky, Commented Nov 7, 2011 at 18:44

Rob W · Accepted Answer · 2011-11-07 18:43:04Z

8

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.

answered Nov 7, 2011 at 18:43

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Blazemonger Over a year ago

It might be worth mentioning that this is not considered a bug in jQuery. jQuery reports the CSS attributes exactly as the browser returns them, and different browsers sometimes return different answers for the same HTML document.

Rob W Over a year ago

In fact, the window.computedStyle() and element.currentStyle[] (IE) methods are used. Some values are modified by jQuery, to show the same result across different browsers.

gabaum10 Over a year ago

Ahh. Now that makes a lot of sense. I saw something like this in the Jquery docs, but didn't put 2 and 2 together. Thank you.

RMorrisey · Accepted Answer · 2011-11-07 18:40:37Z

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.

answered Nov 7, 2011 at 18:40

RMorrisey

7,74911 gold badges59 silver badges77 bronze badges

Comments

avpaderno · Accepted Answer · 2011-11-08 13:20:40Z

0

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

edited Nov 8, 2011 at 13:20

avpaderno

30k17 gold badges81 silver badges95 bronze badges

answered Nov 7, 2011 at 18:44

jsonx

1,0863 gold badges14 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery- .css() issue for an input

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related