jQuery - css('border-width') returning as an empty string on Firefox but not on Chrome [duplicate]

Question

I'm trying to debug a cross browser issue with my jQuery/CSS.

I'm attempting to get the border width of a class. The class is set in CSS like so:

.mod_button {
    position: relative;
    color: #fff;
    border-color: #06253e;
    border-width: 1px;
    border-style: solid;
}

In jQuery, I am attempting to get the border-width like so:

var bWidth = $('.mod_button').css('border-width');

This seems to return properly as a string of "1px" in Chrome. However, in Firefox it always returns as an empty string "". I've checked these results stepping through the JS debuggers in the developer tools on both Chrome and Firefox.

I've been going nuts trying to debug this issue and I can't seem to find any concise answers. Perhaps the community here can give me a clue as to how I can fix this issue.

Thank you!

What are you actually trying to do? I would advise using a method such as .hasClass() instead of looking directly at the css. Each browser has different default settings and implementations of css. — Brad M
– Brad M, Commented Jun 18, 2013 at 18:14
have you tried var bWidth = $('.mod_button').css("border-left-width");? or whatever border you need — Morpheus
– Morpheus, Commented Jun 18, 2013 at 18:15

Community · Accepted Answer · 2017-05-23 12:13:52Z

18

Properties such as "border", "background", and even "border-width" are shorthand. They are not supported. Instead, use more specific properties: "border-top-width", "border-bottom-width".

The following line should work in all browsers:

var bWidth = $('.mod-button').css('border-top-width');

Related question: Getting CSS border value with jQuery in Firefox 14.0.1

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Jun 18, 2013 at 18:21

orlenko

1,2718 silver badges11 bronze badges

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

2 Comments

defwonder Over a year ago

Thanks! That seemed to do the trick. Sorry for the similar/duplicate question.

webkit Over a year ago

wow this helped me, was bugging off trying to get my css('border-color ').. in chrome it worked, in firefox I was getting an empty string !? .. tried 'border-top-color' now and works like a charm.. good job.

Collectives™ on Stack Overflow

jQuery - css('border-width') returning as an empty string on Firefox but not on Chrome [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions