[Javascript] Javascript and CSS

[Paul Novitski]

At 3/23/2008 06:18 PM, Professional Web Pages - Information wrote:
>I am trying to obtain an element with Javascript but would also like 
>to include certain classs with the element to weed out the specific element
>
>For example
>
>in css you can do this
>
>" #CntOverlayExpandedInformationContainer .InformationContainer"


Hi GT,

You can retrieve the class of an element with the className property, e.g.

         var eEicShowContainerHider = 
document.getElementById("CntOverlayExpandedInformationContainer");

                 // not found?
                 if (!eEicShowContainerHider) return alert('Hider not found');

         // get the element's class (will be null if no class name exists)
         var sClass = eEicShowContainerHider.className;

         // locate the desired class name as a discrete word
         var rRegExp = /(^|\s)InformationContainer(\s|$)/;

                 // if there is a class and it's the one we're seeking...
                 if (sClass  && rRegExp.test(sClass))
                 {
                         ...
                 }

I've used a regular expression to test for the desired class name to 
accommodate the fact that an element's class attribute can contain 
more than one class name, e.g.:

         <div class="active InformationContainer hidden">

so I'm checking for the desired class at the beginning of the string 
(^InformationContainer) or after whitespace (\sInformationContainer) 
and before either whitespace (InformationContainer\s) or the end of 
string (InformationContainer$).


It's worth mentioning that an id must be unique on a page,* so you 
should have only one instance of 
#CntOverlayExpandedInformationContainer in your document.  The only 
reason I can think of why you'd need to verify the identity of an 
element by checking its class when you already know its id is if the 
markup changes dynamically, either client-side or server-side, 
depending on circumstances, so that a given element with a known id 
will have a class sometimes and not others.  But in any one page-view 
that id must be unique.

Many of us have written getElementsByClassName() functions in which 
you pass the sought-after class name and optionally an element such 
as 'div' and it will return an array of all such elements on the page 
with the given class.  However this sort of logic would be redundant 
in your situation because you can't have more than one 
#CntOverlayExpandedInformationContainer.

* The uniqueness of an element id is described here:

HTML 4.01 Specification
7 The global structure of an HTML document
7.5.2 Element identifiers: the id and class attributes
http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

and here;

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
5 Selectors
5.9 ID selectors
http://www.w3.org/TR/CSS21/selector.html#id-selectors

Regards,

Paul
__________________________

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com