W3C home > Mailing lists > Public > www-style@w3.org > November 2000

Off Topic: Re: changing css properties in the dom

From: Dylan Schiemann <dylans@yahoo.com>
Date: Tue, 21 Nov 2000 10:40:57 -0800 (PST)
Message-ID: <20001121184057.5070.qmail@web115.yahoomail.com>
To: www-style@w3.org

--- ValerieGSharp <ValerieGSharp@netscapeonline.co.uk>
wrote:
> > Chason Chaffin wrote:
> > 
> > this may or may not be off-topic, but this is the
> last place i know to
> > look for an answer, since all the dhtml sites out
> there seem to want
> > to focus on heirarchal menus and chasers.. i am
> trying to change the
> > text size of everything encased in a p tag via
> javascripting.. can
> > anyone give me a standards compliant way of
> accessing the style object
> > for the p tag? i tried looking at the DOM1 on the
> w3c site but it's
> > rather incomprehensible to me. :) thanks in
> advance.
> > 
> > -chason
> > http://www.nulldesign.com/chason/
> 
> 
> The className property of the p element can be
> changed dynamically.
> 
> E.g. given a couple of styles,
> 
> .stop {color:red}
> .go {color:green}
> 
> and a p element,
> 
> <p class="stop" id="pId">...</p>
> 
> one can change the class of the p element thus:
> 
> document.getElementById("pId").className="go";
> 
> (See DOM2 - Appendix E: ECMA Script Language
> Binding: "Object
> HTMLElement".)
> 
> 
> -- 
> Regards,
> Val Sharp - Edinburgh
> 
This should actually be
document.getElementById("pId").class="go";
IE incorrectly uses className

Are you looking to set or read a style?

A more general way would be to access the element by
its id or tagName, as in 
document.getElementById("paragraphId") or
document.getElementsByTagName("p").item(index)

then to set the style for that tag, as in

document.getElementById('paragraphId').style.fontSize="1em";

Then, to set all of its children, loop through the
childNodes array, and set it for any non-text node

i.e.

for(var i=0;
i<document.getElementById('paragraphId').childNodes.length;i++)
{
if(document.getElementById('paragraphId').childNodes[i].nodeType!=3)
document.getElementById('paragraphId').childNodes[i].style.fontSize="1em";
}


There are other methods such as getComputedStyle()
which should return the value calculated by the
cascade, though its current implementation is limited
(doesn't work in IE, partially implemented in
Mozilla/NS 6.).

Send a private e-mail, or post to
netscape.public.dev.style or netscape.public.dev.dom
newsgroups for more help.

-Dylan Schiemann

__________________________________________________
Do You Yahoo!?
Yahoo! Shopping - Thousands of Stores. Millions of Products.
http://shopping.yahoo.com/
Received on Tuesday, 21 November 2000 13:41:03 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:06 GMT