CODEWITHSUNDEEP
jquerycssinternet-explorerborder
Kedor
Kedor

Reputation: 1498

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

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

Upvotes: 13

Views: 4191

Answers (4)

Adil Shaikh
Adil Shaikh

Reputation: 44740

Try this ..Works on IE8

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

enter image description here

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

Upvotes: 5

James Daly
James Daly

Reputation: 1386

try regular js

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

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

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:

IE Dev Tools

Upvotes: 7

kelly johnson
kelly johnson

Reputation: 1636

similar to Mohammad Adil:

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

you have to spec each side

Upvotes: 2

Related Questions