Changing CSS styles with Javascript

Discussion in 'Javascript' started by matturn, Jul 13, 2007.

  1. matturn

    matturn Guest

    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?
    matturn, Jul 13, 2007
    1. Advertisements

  2. matturn

    David Mark Guest

    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.
    David Mark, Jul 13, 2007
    1. Advertisements

  3. matturn

    matturn Guest

    Thanks. I've found some code to do this I can modify.
    matturn, Jul 13, 2007
  4. matturn

    matturn Guest

    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
    matturn, Jul 13, 2007
  5. Actually changing their attributes? Only by looping over them.

    Its faster and easier to have a prepared ruleset in your stylesheet
    that targets li (or similar) and then to change the className
    of the ul element.
    David Dorward, Jul 13, 2007
  6. matturn

    Mahernoz Guest

    This is reply
    Mahernoz, Jul 13, 2007
  7. 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 Dorward, Jul 13, 2007
  8. matturn

    David Mark Guest

    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
    David Mark, Jul 13, 2007
  9. matturn

    RobG Guest

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

    <URL: >

    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.
    RobG, Jul 13, 2007
  10. David Dorward, Jul 13, 2007
  11. 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.
    David Dorward, Jul 13, 2007
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.