how to get css of a clicked div using jquery?

Question

Can anybody know how to get border-color of a div using jquery.

Jquery:

$("#divcolor").click(function (){
  alert("dsf");
  var divcolor = $(this).css("border-color");
  alert(divcolor);
});

Html:

<div id="divcolor" style="border:#333333 solid 1px;" >
This is the target
</div>

In divcolor variable i am not getting anything.

Answer 1

Using the CSS jQuery function like you did:

http://docs.jquery.com/CSS/css#name

But read this paragraph:

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.

Answer 2

Your mistake is elsewhere. That code works on Chrome and IE.

Answer 3

border-color isn't working for me either (on Firefox), but this works:

$(this).css("border-top-color")

http://jsbin.com/ezefu

Answer 4

Try this one:

Jquery:

$("#divcolor").click(function (){
  alert("dsf");
  var divcolor = $(this).css("border-color");
  alert(divcolor);
});

Html:

<div id="divcolor" style="border:1px solid; border-color:#333333;" >
This is the target
</div>

Answer 5

$("#divcolor").click(function (){
      var divcolor = $(this).css("borderColor");
      alert(divcolor);
});

Answer 6

I always consider it better practice to work with CSS classes instead of CSS direct. Then you could have something like:

$(this).hasClass("MyClassWithTheBorderColorStyleInIt");

Answer 7

else you can write like this

        $("#divcolor").click(function()
        {
            var divcolor = $(this).css("border");
            divcolor = divcolor.substring((divcolor.indexOf(' ') + 1), divcolor.length);
            divcolor = divcolor.substring((divcolor.indexOf(' ') + 1), divcolor.length);

            alert(divcolor);
        });