CODEWITHSUNDEEP
jquerycss
Pinkie
Pinkie

Reputation: 10256

Get border style with jQuery

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

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

Check http://jsfiddle.net/s7YAN/31/

Upvotes: 2

Views: 7975

Answers (4)

Thomas Shields
Thomas Shields

Reputation: 8942

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/

Upvotes: 0

Timon. Z
Timon. Z

Reputation: 681

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.

Upvotes: 3

James
James

Reputation: 5169

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.

Upvotes: 5

kapa
kapa

Reputation: 78681

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.

Upvotes: 0

Related Questions