Webmaster Forum / HTML, CSS, Scripts / JavaScript / March 2005

Borders are inherently presentation, and as such CSS (or old HTML).
However, you can use Javascript to access the CSS style of an object
through the W3C Style DOM.

Close. Try:
onfocus="this.style.border='3px solid red';"
or just
onfocus="this.style.borderWidth='3px';"

Good luck
/L

why not use the CSS pesudo-element :hover ?

on anything other than <a>

I doubt you want the border turned on when the cell has the focus set on
it (that would require the user actually click on the cell). Also,
Gecko-based browsers and Opera have no concept of "focus" on a table
cell:

<table><tr><td onfocus="alert('hi');">TEST</td></tr></table> does
nothing in a Gecko-based browser or Opera, no matter how much you click
and move the mouse around.

So, you probably want to do this onmouseover and onmouseout (to clear
the border when they leave the cell):

<script type="text/javascript">
function mOver(cell)
{
   if (cell.style && 'undefined' != typeof cell.style.border)
   {
       cell.style.border = '3px solid Black';
   }
}
function mOut(cell)
{
   if (cell.style && 'undefined' != typeof cell.style.border)
   {
       cell.style.border = 'none';
   }
}
</script>
<table>
<tr>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
</tr>
</table>

Note this creates a rather undesirable rearranging of the table as you
move the mouse around. Personally I'd probably do something like:

<style type="text/css">
td { border: 3px solid White; }
td.mOver { border: 3px solid Black; }
</style>
<script type="text/javascript">
function mOver(cell)
{
   if ('undefined' != typeof cell.className)
   {
       cell.className = 'mOver';
   }
}
function mOut(cell)
{
   if ('undefined' != typeof cell.className)
   {
       cell.className = '';
   }
}
</script>
<table>
<tr>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
<td onmouseover="mOver(this);" onmouseout="mOut(this);">TEST</td>
</tr>
</table>

Of course, in browsers that support it (Gecko-based browsers, Opera),
all this can be replaced by:

<style type="text/css">
td { border: 3px solid White; }
td:hover { border: 3px solid Black; }
</style>
<table>
<tr>
<td>TEST</td><td>TEST</td><td>TEST</td>
</tr>
</table>