<html>
<head>
<style>
P
{
margin:0px;
padding:0px
}
body
{
FONT-SIZE: 10pt;
FONT-FAMILY:Tahoma
}
</style>
</head>
<body>it is impossible to change the CSS itself. Eventhough you can assign<BR>
a different value for some property of an element through javascript,<BR>
it is done via inline css, meaning that the body of css remains uncha-<BR>
ged. Only the HTML code will change. <BR>
<BR>
exmp.<BR>
your code:<BR>
<DIV class=navPanel>..</DIV><BR>
<BR>
resulting code after js manipulation:<BR>
<DIV class=navPanel style="width:561px">..</DIV><BR>
<BR>
So, it is posible for you to read css and change values of properties<BR>
inlined but if your script statement says this.style.width="" the res-<BR>
ulting width of that element will return to it's original value as it exists<BR>
in the style body but not undefined. <BR>
(As I recall from my last check on this, few years ago).<BR>
<BR>
Regards<BR>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <BR> Troy III <BR> progressive art enterprise<BR>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<BR><BR>
<HR id=EC_stopSpelling>
Date: Thu, 14 Jun 2007 12:18:24 +0100<BR>From: lbettridge@twowaytv.co.uk<BR>To: javascript@LaTech.edu<BR>Subject: [Javascript] dynamically reading/changing values in a css class from javascript<BR><BR>
<META content="Microsoft SafeHTML" name=Generator>
<STYLE>
.ExternalClass EC_p.MsoNormal, .ExternalClass EC_li.MsoNormal, .ExternalClass EC_div.MsoNormal
{margin-bottom:.0001pt;font-size:12.0pt;font-family:'Times New Roman';color:black;}
.ExternalClass EC_a:link, .ExternalClass EC_span.MsoHyperlink
{color:blue;text-decoration:underline;}
.ExternalClass EC_a:visited, .ExternalClass EC_span.MsoHyperlinkFollowed
{color:blue;text-decoration:underline;}
.ExternalClass pre
{margin-bottom:.0001pt;font-size:10.0pt;font-family:'Courier New';color:black;}
.ExternalClass EC_span.EmailStyle18
{font-family:Arial;color:navy;}
@page Section1
{size:612.0pt 792.0pt;}
.ExternalClass EC_div.Section1
{page:Section1;}
</STYLE>
<BR>
<BLOCKQUOTE>
<DIV class=EC_Section1>
<P class=EC_MsoNormal><FONT face=Tahoma color=navy size=2><SPAN style="FONT-SIZE: 10pt; COLOR: navy; FONT-FAMILY: Tahoma">Is it possible to read a value from a CSS class and assign it to a javascript variable ? and then in turn change the value in the CSS class from javascript?</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face=Arial color=navy size=2><SPAN style="FONT-SIZE: 10pt; COLOR: navy; FONT-FAMILY: Arial"> </SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face=Arial color=navy size=2><SPAN style="FONT-SIZE: 10pt; COLOR: navy; FONT-FAMILY: Arial">Eg.</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face=Arial color=navy size=2><SPAN style="FONT-SIZE: 10pt; COLOR: navy; FONT-FAMILY: Arial"> </SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face=Arial color=navy size=2><SPAN style="FONT-SIZE: 10pt; COLOR: navy; FONT-FAMILY: Arial">In CSS file</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face=Arial color=navy size=2><SPAN style="FONT-SIZE: 10pt; COLOR: navy; FONT-FAMILY: Arial"> </SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'">.navPanel</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'">{</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'"> position: absolute;</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'"> background: url(gfx/panel.png) no-repeat;</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'"> top: 325px;</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'"> left: 39px;</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'"> width: 561px;</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'"> height: 124px;</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'"> z-index: 2;</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'"> visibility: hidden;</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'">}</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face="Courier New" color=black size=2><SPAN lang=EN-GB style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: 'Courier New'"> </SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face=Arial color=navy size=2><SPAN style="FONT-SIZE: 10pt; COLOR: navy; FONT-FAMILY: Arial">in Javascript file</SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face=Arial color=navy size=2><SPAN style="FONT-SIZE: 10pt; COLOR: navy; FONT-FAMILY: Arial"> </SPAN></FONT></P>
<P class=EC_MsoNormal><FONT face=Arial color=navy size=2><SPAN style="FONT-SIZE: 10pt; COLOR: navy; FONT-FAMILY: Arial">var width = [somehow read the .navPanel.width value]</SPAN></FONT></P></DIV><BR>-- <BR>Two Way TV is the trading name of Two Way Media Ltd<BR>Company Number: 4904168<BR><BR><BR><BR></BLOCKQUOTE><br /><hr />Make every IM count. Download Windows Live Messenger and join the i’m Initiative now. It’s free. <a href='http://im.live.com/messenger/im/home/?source=TAGWL_June07' target='_new'>Make it count!</a></body>
</html>