[thelist] Separate text node from containing element using JS?
Matt Warden
mwarden at gmail.com
Mon Mar 12 12:12:47 CDT 2007
On 3/12/07, Barney Carroll <barney at textmatters.com> wrote:
> Calling people with an understanding of DOM:
>
> I've been scratching my head with this little dilemma. I want to create
> OLs with numeric markers that are a different colour from the LI content.
>
> CSS doesn't cater for list marker color properties, there is only LI to
> define at best. A simple solution would involve something like this:
>
> <ol>
> <li><span>Preface</span></li>
> <li><span>Introduction</span></li>
> <li><span>Chapter 1</span></li>
> </ol>
>
> li{color:red;}
> li span{color:black;}
>
>
> ...However I am writing this for a very simple CMS and inserting the
> spans and making sure the text is in them is beyond my means. Use of
> list-style-image and adjacent selectors is also out because my user base
> is on IE (as ever).
>
I would suggest using JS to insert the spans. Some might say this is
inappropriate use of JS, but I think it's better than trying to do the
styling in JS (here you would just be modifying the structure, and CSS
would be defining the style).
pseudo:
lists = getelementsbyclassname('whatever') // available in many
utility libraries, e.g. YUI
for each list in lists {
listitems = list.getElementsByTagName('li');
for each li in listitems {
copy text
delete text node
create span
create text node with copied text
append span to li
}
}
--
Matt Warden
Cleveland, OH, USA
http://mattwarden.com
This email proudly and graciously contributes to entropy.
More information about the thelist
mailing list