Accessing a css style attribute…

@JShineMay 10.2004

Hello,

I have a table cell with an associated css style, and I need to read the style attributes from a javascript routine. Could someone provide some pointers on how this is done?

Thanks!

to post a comment

JavaScript

@VladdyMay 10.2004 — #A link to the page and explanation of what you are trying to achieve by "reading the style attributes from a javascript routine" would be helpful in determining what you actually need.

@JShineauthorMay 10.2004 — #>> A link to the page and explanation of what you are trying to achieve by "reading the style attributes from a javascript routine" would be helpful in determining what you actually need. <<

OK. Let's say we have the following style...

.MainMenuNormal {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #FFFFFF;

background-color: #000000;

text-align: center;

vertical-align: middle;

width: 120px;

height: 18px;

}

...and the following table snippet...

<table >

<tr id="MainMenuRow">

<td class="MainMenuNormal" id="mainHome">Home</td>

<td class="MainMenuNormal" id="mainAbout">About Us </td>

<td class="MainMenuNormal" id="mainDepts">Departments</td>

...and so on...

I need to be able to read the cell's style attributes from a javascript - e.g. I need to read the color, background-color, width, height attributes. I may want to change the color, or I may need to position a drop-down menu relative to the position of the table cell.

How does one do this?

@VladdyMay 10.2004 — #To begin with, navigation is a (nested) list of links:

www.vladdy.net/Demos/CSSNav.html

It has nothing to do with a table.

Still you did not explain WHY would you need to read those attributes and WHY would you want to change color.

@cootheadMay 10.2004 — #Hi there JShine,

and welcome to these forums ?

I may be wrong - nothing unusual in that - but I believe that

you can only get the style attributes if they are inline like this...

&lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
 
 function displayInfo(){
 if( navigator.appName=="Netscape") {
 a=document.getElementById('cell').style.getPropertyValue('width');
 b=document.getElementById('cell').style.getPropertyValue('height');
 c=document.getElementById('cell').style.getPropertyValue('background');
 d=document.getElementById('cell').style.getPropertyValue('border');
 
 document.getElementById('cell').innerHTML='width: '+a+'&lt;br /&gt;'+'height : '
 +b+'&lt;br /&gt;'+'background : '+c+'&lt;br /&gt;'+'border : '+d;
 }
 else {
 a=document.getElementById('cell').currentStyle.width;
 b=document.getElementById('cell').currentStyle.height;
 c=document.getElementById('cell').currentStyle.backgroundColor;
 d=document.getElementById('cell').currentStyle.borderStyle;
 e=document.getElementById('cell').currentStyle.borderWidth;
 f=document.getElementById('cell').currentStyle.borderColor;
 
 document.getElementById('cell').innerHTML='width: '+a+'&lt;br /&gt;'+'height : '
 +b+'&lt;br /&gt;'+'background : '+c+'&lt;br /&gt;'+'border-style : '+d+'&lt;br /&gt;'
 +'border-width : '+e+'&lt;br /&gt;'+'border-color : '+f;
 }
 }
 window.onload=displayInfo;
 //]]&gt;
 &lt;/script&gt;
 
 &lt;table&gt;&lt;tr&gt;
 &lt;td id="cell"style="width:200px; height:100px; background-color:#ff0000; border:solid 1px  #000000;"&gt;&lt;/td&gt;
 &lt;/tr&gt;&lt;/table&gt;

[i]coothead[/i]

Accessing a css style attribute…

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Accessing a css style attribute…

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴