How to get CSS of a clicked div using jQuery?

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

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

<script开发者_开发技巧 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divcolor" style="border:#333333 solid 1px;" >
	This is the target
</div>

In divcolor variable I am not getting anything.

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.

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

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

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

http://jsbin.com/ezefu

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

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

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);
});

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

Try this one:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divcolor" style="border:1px solid; border-color:#333333;" >
  This is the target
</div>