Get border style with jQuery

Question

How can i get border style with jQuery. The following is not working

$(\'#get\').click(function() {
    var x = $(\'div\').css(\'borderStyle\');
    alert(x)
})
         


        

Answer 1

Apparently you must specify the side.

Like that :

var x = $('div').css("border-left-style");

http://jsfiddle.net/s7YAN/45/

I think it's because each side could have a different size, color and style.

Answer 2

The jQuery .css() manual states that:

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

Basically border-style is just a shorthand for setting the style of the border on the four sides. It can also be used like border-style: dotted solid double dashed; but normally you just write border-style: dashed; that is why it feels like a simple property. The same happens with margin, saying margin: 20px; actually means margin: 20px 20px 20px 20px; (it is also a shorthand property).

That is why you need to use border-top-style, border-right-style, etc. to get the border style.

Answer 3

Check this out. it appears you have to set an explicit side: How to get border width in jQuery/javascript Not exactly the same, but the same principle should apply to you, as demonstrated here:

alert($('div').css('border-top-style'));

http://jsfiddle.net/s7YAN/54/

Answer 4

alert($("div.myel").css("border-top-style"));

http://jsfiddle.net/jbrooksuk/YJQAS/

It seems that you're unable to get the whole border style in one go. You need to explicitly state which part of it you want.