Get border color with jQuery in IE with .css()

Question

There is a problem getting border color of the clicked element in Internet Explorer.

$("#clickme").click(function() {
    alert($(this).css('border-color'));
});

Here is jsfiddle: http://jsfiddle.net/dS7mc/
It works in chrome but it doesn't work in IE10.

Any ideas how to make it work with both? Also changing to "border" only, in chrome it gives me 2px solid rgb(0, 0, 0) but in Ie i still get empty alert.

PS. Yes, I've tried "borderColor". Also doesn't work in IE

Answer 1

This is because in Internet Explorer there is no border-color. The property gets renamed to border-pos-color:

border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;

The same applies to border-width and border-style (border-left-width, etc.). In order to pull the border color (assuming all 4 are the same), you'd use:

$(this).css('border-top-color');

Equally to pull the border-width or border-style (again assuming all 4 are equal) you'd use:

$(this).css('border-top-width');
$(this).css('border-top-style');

You can find which style properties an element has with IE's F12 developer tools:

Answer 2

Try this ..Works on IE8

$("#clickme").click(function() {
    $('body').append($(this).css('border-top-color'));
});

jsFiddle

Also, Colors are returned by browsers in a different way FireFox, Safari and Chrome return them as rgb() values and IE returns them exactly like you set them in your CSS even when you use the shorthand notation (#f00 vs #ff0000) and Opera always returns the color as hexidecimal with 6 digits

Answer 3

similar to Mohammad Adil:

$("#clickme").click(function() {
    var Bcolor = $(this).css("border-left-color");
    alert(Bcolor);
});

you have to spec each side

Answer 4

try regular js

var clickme = $("#clickme")[0];
    clickme.addEventListener('click', function() {
    alert(clickme.style.borderColor)
    }, false)