473,842 Members | 1,575 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 58255
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.s tyle.border='3p x solid red';"
or just
onfocus="this.s tyle.borderWidt h='3px';"

Good luck
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.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*****@epitom e.com.sg> wrote in message
news:11******** **************@ l41g2000cwc.goo glegroups.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><t d 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.bord er)
{
cell.style.bord er = '3px solid Black';
}
}
function mOut(cell)
{
if (cell.style && 'undefined' != typeof cell.style.bord er)
{
cell.style.bord er = 'none';
}
}
</script>
<table>
<tr>
<td onmouseover="mO ver(this);" onmouseout="mOu t(this);">TEST</td>
<td onmouseover="mO ver(this);" onmouseout="mOu t(this);">TEST</td>
<td onmouseover="mO ver(this);" onmouseout="mOu t(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="mO ver(this);" onmouseout="mOu t(this);">TEST</td>
<td onmouseover="mO ver(this);" onmouseout="mOu t(this);">TEST</td>
<td onmouseover="mO ver(this);" onmouseout="mOu t(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*****@agrico reunited.com>
comp.lang.javas cript 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
2042
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 fine, but the images aren't displayed, instead the alt text is shown. The images come up after you "Mouse Over" them but not before......can anybody spot any errors in my code which could be doing this please. For info, I have 4 images for each...
9
2129
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 and Safari, but in the latest FireFox I get no title or article, but do see the prev and next links and the article number. My HTML and JS simple routine is as follows:
1
3777
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
4241
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 avaliable at... http://www.geocities.com/binnyva/code/javascript/advanced_tutorial/ If any of you could spare the time, please have a look at my tutorial
8
3683
by: chrisdude911 | last post by:
how do i add video into a javascript web page with my own custom buttons?
4
8940
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 problem is, when the javascript fires on the txtDateRequiredOut TextBox in IE, I get "Error on Page" in the status bar and the error says: "Object Expected". Viewing the source of the page while running shows a link created properly for the linked...
4
2338
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
3160
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 then the calender gone actually i want if i click outside off the calender then it should me removed ..How kan i do this ... Pls inform me as early as possible .. I am waiting for ur quick replay ...Here i attached the source code .... <!DOCTYPE...
0
9872
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
9715
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10945
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10612
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10672
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
5696
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4499
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4089
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3145
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.