Printable View
Hi All
Is there any way of accessing a class in a external style sheet that is linked to a page using javascript.
Basically I have a class (.MO) which holds a back ground colour which I need to use to change the colour of something when they mouse over.
src.style.color = MO's background colour ?
Any help greatly appreciated
Ian
im not quite sure what youre asking but ill have a go.You need to link the style sheet first.eg
<head>
<title></title>
<LINK REL=STYLESHEET TYPE="text/javascript" HREF="yourstyle">
</head>
if you have done this then you only need to assign which ever style within that style sheet to the tag.however if you assign a style to a tag then the whole of that style applies to that tag.ie
tags.p.fontsize="22pt";
tags.p.backgroundcolor="white";
if this style was applied to a tag then the font size and background color would be applied.if you only want to apply the background color, make a new class with only the backgroundcolor defined.
ids.mybackground.backgroundColor="white";
you could use
<SPAN ID="mybackground">gobbledigook</SPAN>
i hope this helps m8
use the ELEMENT.CLASS = CLASSNAME syntax via Javascript to change the class of the element. Just make sure your external style sheet is referenced via LINK REL....
if you need code let me know
Hi Clunietp
Sorry about the delay in replying but i've been on holiday for the last week.
I did what you said and It doesn't work. Both IE and NS doesn't say there is an error but the bgcolor stay's the same.
I link to the style sheet using the following
<link id="mystyle" rel="stylesheet" href="../../NDL/colours.css" type="text/css">
My javascript funtion's are as follows
function mOvrTAB(src)
{
if(!src.contains(event.fromElement))
src.CLASS = "MO";
}
function mOutTAB(src)
{
if(!src.contains(event.toElement))
src.CLASS = "";
}
and I reference the functions as follows
[code}
<tr>
<td VALIGN="MIDDLE" ONMOUSEOVER="mOvrTAB(this);" ONMOUSEOUT="mOutTAB(this);" ONCLICK="mClkTAB(this);" align="center" class="TRE">
<a href="../results.asp?ID=NDL&mortType=CURRENT" class="LK2">Current Account Mortgages</a></td>
<td class="TC2" align="center">
<a href="javascript:PopWi('buyerpayment1.htm','newwindow')">
<img src="../../<%=PartnerID%>/images/question.GIF" border="0"></a></td>
</tr>
[/code]
Any help would be greatly appreciated
Ian
Use className as the property you want to change
example:
Code:<HTML>
<SCRIPT language="javascript">
function highlightIt(theObject)
{
theObject.className = "clsSelected";
}
function unHighlightIt(theObject)
{
theObject.className = "clsNormal";
}
</SCRIPT>
<BODY>
<LINK REL="stylesheet" type="text/css" href="default.css">
<TABLE>
<TR>
<TD id=TD1 onmouseover="highlightIt(this);" onmouseout="unHighlightIt(this);">HELLO</TD>
<TD id=TD2 onmouseover="highlightIt(this);" onmouseout="unHighlightIt(this);">WORLD</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Thanks Clunietp, it works perfectly
Ian