473,320 Members | 2,041 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Javascript equivalent of CSS border?

Hi

Can any tell me what is the javascript equivalent of CSS border? I
would like to change the border of my cell when it is set on focus. I
have tried onFocus="style.border='3px'" but it is not working.

Thanks

Jul 23 '05 #1
3 58230
ef*****@epitome.com.sg writes:
Can any tell me what is the javascript equivalent of CSS border?
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.
I would like to change the border of my cell when it is set on
focus. I have tried onFocus="style.border='3px'" but it is not
working.


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

Good luck
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #2
why not use the CSS pesudo-element :hover ?

:hover works for all elements. It's only IE that refuses to handle it
on anything other than <a>

Jul 23 '05 #3
<ef*****@epitome.com.sg> wrote in message
news:11**********************@l41g2000cwc.googlegr oups.com...
Hi

Can any tell me what is the javascript equivalent of CSS border? I
would like to change the border of my cell when it is set on focus. I
have tried onFocus="style.border='3px'" but it is not working.


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>

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: John Ortt | last post by:
Hi Everyone, I have created a Javascript menu for my site which uses frames. The first stage loads fine but I want two drill down menus ("About Me Menu" and "Projects Menu"). The pages load...
9
by: Astra | last post by:
Hi everybody Wonder if you could help me out. I created a simple JavaScript routine to enable a user to click backwards and forwards between small news articles. This routine works fine in IE...
1
by: IkBenHet | last post by:
Hello, I found this script to create a simple rich text form (http://programmabilities.com/xml/index.php?id=17): <html> <head> <title>Rich Text Editor</title> </head> <body>
15
by: binnyva | last post by:
Hello Everyone, I have just compleated a JavaScript tutorial and publishing the draft(or the beta version, as I like to call it) for review. This is not open to public yet. The Tutorial is...
8
by: chrisdude911 | last post by:
how do i add video into a javascript web page with my own custom buttons?
4
by: Greg | last post by:
I'm guessing the problem I'm having has something to do with Master Pages or DetailsView because the exact same code works fine on a page without a Master Page and DetailsView controls. The...
4
by: lmarceglia | last post by:
Hi, I have this website that doesn't work in Firefox 1.5: www.pianetaluca.com The HTML source is: <TITLE>PianetaLuca</TITLE> </HEAD>
2
by: sorobor | last post by:
dear sir .. i am using cakephp freamwork ..By the way i m begener in php and javascript .. My probs r bellow I made a javascript calender ..there is a close button ..when i press close button...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.