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.