Change Border Color of a HTML Control to its Default

[dch31969]

What value should I use to change the border of an element back to its default? I tried 'null' and 'undefined' to no avail. When I inserted window.alert(targetControl.borderColor); it returned 'undefined' as the value.

function highlightControl(ctl, mode) {
var targetControl = document.getElementById(ctl);
if (mode == "on") {
targetControl.style.borderColor = "red";
}
if (mode == "off") {
targetControl.style.borderColor = null;
}
}

[WestWeb]

What do you mean by default(FYI: I'm assuming you don't mean the browser default of black)?

Please elaborate.

[xelawho]

It's worth noting that javascript cannot read a style that has been set in css. It can read an inline style or a style set by javascript, or it can read the computed style. But of course IE handles computed style differently to everybody else so you need a workaround. Here's a good explanation

[mrhoo]

// Pass the empty string

function highlightControl(ctl, mode){
document.getElementById(ctl).style.borderColor= mode== 'on'? 'red':'';
}

[codingforever99]

yes, as mrhoo said // Pass the empty string

you can get that value if you just ask about.
using alert('['+targetControl.style.borderColor+']'); in your code which will return by the defaul [] an empty string.

so your code will be

function highlightControl(ctl, mode) {
var targetControl = document.getElementById(ctl);
if (mode == "on") {
targetControl.style.borderColor = "red";
}
if (mode == "off") {
targetControl.style.borderColor = ""; // instead of using null value

}
}

good luck.

[MrSnowDrop]

"null" value isn't good for borders;

you can try to assign a "transparent" value to remove border's color :


<... border style="color:transparent" ...> <!-- HTML -->


... element.style.borderColor='transparent' // Javascript