How can I get a div's border width/color in javascript?

Question

I'd like to detect if a div has border. If so, I'd like to change the border color to gray. Here's my code but does not work.

var ele = document.get...;
if(ele.style.borderColor)
{
   ele.style.borderColor='666666';
}

The ele.style.borderColor is always null. BTW, I can't use JQuery here. Could someone help?

Answer 1

var ele = document.getElementById('a'),
    style = window.getComputedStyle(ele, null),
    sides = ['top', 'right', 'bottom', 'left'],
    maxBorder = 0;

for (var i = 0, length = sides.length; i < length; i++) {
    maxBorder = Math.max(maxBorder, parseInt(style.getPropertyValue('border-' + sides[i] + '-width')));
}

if (maxBorder) {
    ele.style.borderColor = '#666666';
}

jsFiddle .

Answer 2

You could just set the border color, and don't try to read any property.

If the element has no border, setting the color won't have any effect.

Answer 3

The error you have made is that you haven't specified the '#' sign before the color hex code
So You will have to make a little change: ele.style.borderColor='#666666';

Answer 4

I think you're getting a null because you are missing the hyphen in the middle of the property. "border-color"

Since you can't use jquery here I would look at all the css border properties to determine if it has a border such as border-style, border-width and border-color.