[Javascript] Accessing a nested Anchor element.

[paul at novitskisoftware.com (Paul Novitski)]

At 09:49 AM 4/18/2005, Ian Skinner wrote:
>Assume the following HTML markup.
>
><td id="G23520050328_name">
>         <a href="..." title="..." onClick="...">CalHFA</a>
></td>
>
>In a JS function there is basically this assignment. [This of course is 
>done dynamically but I am simplifying for this question.]
>
>var name_cell = document.getElementById("G23520050328_name");
>
>What I would like to know, what is the simplest yet cross browser 
>compatible method to access the <a>nchor element in the "name_cell" 
>reference in order to set a style property on the anchor?  The color 
>property in my current requirement.  This can hopefully be done with 
>little to no extra HTML since there are hundreds of these cells.


Ian,

As an alternative to assigning inline styles with javascript, you could 
also approach the problem with CSS.  Here are two methods:

         <td id="G23520050328_name">
                 <a href="..." title="..." onClick="...">CalHFA</a>
         </td>

         td#G23520050328_name a,
         td#G23520070239_name a,
         td#G23520090140_name a
         /* etc. */
         {
                 property: value;
         }

Or, better:

         <td id="G23520050328_name" class="x">
                 <a href="..." title="..." onClick="...">CalHFA</a>
         </td>

         td.x a
         {
                 property: value;
         }

If you style your links this way, is the unique id on each cell necessary 
to support some other functionality or can you eliminate it entirely to 
shrink your markup?

Paul