Changing CSS styles with Javascript

[matturn]

Is it possible to change one of the CSS style attributes of say "ul
li"? Not a class or id, but a subset of HTML elements. If so, how
would this be done?

 

[David Mark]

Is it possible to change one of the CSS style attributes of say "ul
li"? Not a class or id, but a subset of HTML elements. If so, how
would this be done?

Use getElementsByTagName to get the unordered lists, then use the same
on each list to get the items. Loop through the items returned from
each list and change the style properties.

There are libraries out there that shield you from writing these sorts
of loops and I am sure you will hear about them shortly.

 

[matturn]

Use getElementsByTagName to get the unordered lists, then use the same
on each list to get the items. Loop through the items returned from
each list and change the style properties.

There are libraries out there that shield you from writing these sorts
of loops and I am sure you will hear about them shortly.

Thanks. I've found some code to do this I can modify.

 

[matturn]

Thanks. I've found some code to do this I can modify.

I recind my last statement. I found some code that uses a different
method to do the job - I create a style rule for "ul li" and I
reference that (using a similar looping function, something based on
www.faqts.com/knowledge_base/view.phtml/aid/2147/fid/128).

 

[David Dorward]

Is it possible to change one of the CSS style attributes of say "ul
li"? Not a class or id, but a subset of HTML elements. If so, how
would this be done?

Actually changing their attributes? Only by looping over them.

Its faster and easier to have a prepared ruleset in your stylesheet
that targets ul.foo li (or similar) and then to change the className
of the ul element.

 

[Mahernoz]

You can even dynamically insert CSS rules with better luck than
iterating every element.

This is reply

 

[David Dorward]

You can even dynamically insert CSS rules with better luck than
iterating every element.

And you are responding with that to my suggestion why? Please aim your
quoting better.

Last time I looked at dynamically changing the stylesheet itself it
wasn't feasible as, between the major browsers, one had a proprietary
method for doing it, one or two supported the standard, and another
didn't provide any method to do it at all.

Has that changed?

 

[David Mark]

And you are responding with that to my suggestion why? Please aim your
quoting better.

Last time I looked at dynamically changing the stylesheet itself it
wasn't feasible as, between the major browsers, one had a proprietary
method for doing it, one or two supported the standard, and another
didn't provide any method to do it at all.

Has that changed?

Last I checked, it can be done across the latest versions of major
browsers, but it is messy. IE6 is the culprit. If you want any
semblance of backward compatibility with older browsers and hope to
have your app run on mobile devices, appliances, etc. you shouldn't do
it.

 

[RobG]

Is it possible to change one of the CSS style attributes of say "ul
li"? Not a class or id, but a subset of HTML elements. If so, how
would this be done?

Yes, here is code by Martin Honnen that shows how to add and modify CSS
rules:

<URL: http://www.thescripts.com/forum/post343885-2.html >


I posted this link a couple of days ago, it is always good to search the
archives before asking a specific question. They are an amazing resource.

 

[David Dorward]

Yes, here is code by Martin Honnen that shows how to add and modify CSS
rules:

<URL:http://www.thescripts.com/forum/post343885-2.html>

Looks like it doesn't work (or at least, hasn't been tested) in Opera
or Safari/Konq.

 

[David Dorward]

Looks like it doesn't work (or at least, hasn't been tested) in Opera
or Safari/Konq.

Whoops. Opera is mentioned, but it uses an entirely different
technique that doesn't appear to allow existing rules to be modified.

Hmm, and the example uses invalid CSS.