jQuery.css() doestn't return border-color which is set to red

Question

Hi all!

CSS: .divIm { border:1px solid red; } , and code-line var borderColor = $(this).css("border-color") returns "". What is wrong? Or would it be correct trying to get computed style if I use jQuery?

Update: Below is a code which doesn't want to work as it expected.

$("div.divIm").mouseover(function() {
  var borderColor = $(this).css("border-color");
  debugger;
});

Answer 1

var borderColor = $(this).css("border-color")

You need to show more than this. But if this is all you have then the problem is that this isn't defined.

var borderColor = $('.divIm').css("border-color");

Will be what you need.

Answer 2

You can get the computed style with curStyles jQuery Plugin including multiple computed styles.

Answer 3

Since every of the four borders can have a different color, .css('border-color') cannot work out, which color to return (even if they are all the same).

In most of the cases, the color of all borders is the same, so you can do it like this:

$('div.divIm').mouseover(function() {
    var borderColor = $(this).css('border-left-color');
    debugger;
});

So you get the color of the left border and that should be enough for your needs.