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

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.