Style sheets with javascript ?

**Ianpbaker** · Jul 27th, 2000, 10:52 AM

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

**matttibb** · Jul 29th, 2000, 02:23 PM

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

**Clunietp** · Jul 30th, 2000, 12:15 PM

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

**Ianpbaker** · Aug 7th, 2000, 03:52 AM

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

**Clunietp** · Aug 7th, 2000, 10:34 PM

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>

**Ianpbaker** · Aug 8th, 2000, 02:41 AM

Thanks Clunietp, it works perfectly

Ian

Thread: Style sheets with javascript ?

Thread Tools

Display

Posting Permissions