Changing CSS on the fly

[johnmayer]

I am trying to make it possible to change the property of a css box with a link (or preferably select / input form field)
this is what I have so far JS wise:

function border(bvalue) {
if (!document.all) {
document.getElementById('example').style.border = bvalue;
}
}and how i am trying to put it into action:
<a href="javascript:border('solid')">Solid</a>
<a href="javascript:border('1px')">1px</a>
<a href="javascript:border('2px')">2px</a>
<div id="example"></div>

[glenngv]

function border(bvalue) {
if document.getElementById) {
document.getElementById('example').style.border = bvalue;
}
else if document.all) {
document.all['example'].style.border = bvalue;
}
}

just a reminder, using border property allows you to combine into one declaration the ff properties:

border: border-width &| border-style &| border-color

[johnmayer]

Hmmm, so how would I define and call all three?

function border(bstyle, bcolor, bwidth) {
if (document.getElementById) {
document.getElementById('example').style.border = bstyle &| bwidth &| bcolor;
}
else if (document.all) {
document.all['example'].style.border = bstyle &| bwidth &| bcolor;
}
}

<a href="javascript:border(bstyle='solid')">Solid</a>
<a href="javascript:border(bwidth='1px')">1px</a>

[pinkotoad]

Amazing, I've been working on the same thing tonight.
try:
document.getElementById('example').style.borderStyle
document.getElementById('example').style.borderWidth
document.getElementById('example').style.borderColor

Remember JS is CASE sensitive!