How can i get border style with jQuery. The following is not working
$('#get').click(function() { var x = $('div').css('borderStyle'); alert(x) }) 
Add a comment |
4 Answers
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.
Comments
Apparently you must specify the side.
Like that :
var x = $('div').css("border-left-style"); I think it's because each side could have a different size, color and style.
Comments
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.
Comments
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')); 
