Style sheets with javascript ? [Archive]

Click to See Complete Forum and Search --> : 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:

<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