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
    1. Advertising

  2. matturn

    David Mark Guest

    On Jul 12, 7:17 pm, matturn <> wrote:
    > 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.
    David Mark, Jul 13, 2007
    #2
    1. Advertising

  3. matturn

    matturn Guest

    On Jul 13, 9:49 am, David Mark <> wrote:
    > On Jul 12, 7:17 pm, matturn <> wrote:
    >
    > > 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.


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

    matturn Guest

    On Jul 13, 12:22 pm, matturn <> wrote:
    > On Jul 13, 9:49 am, David Mark <> wrote:
    >
    > > On Jul 12, 7:17 pm, matturn <> wrote:

    >
    > > > 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.

    >
    > 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).
    matturn, Jul 13, 2007
    #4
  5. On Jul 13, 12:17 am, matturn <> wrote:
    > 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.

    --
    David Dorward
    http://dorward.me.uk
    http://blog.dorward.me.uk/
    David Dorward, Jul 13, 2007
    #5
  6. matturn

    Mahernoz Guest

    On Jul 13, 11:17 am, -Lost <> wrote:
    > David Dorward wrote:
    > > On Jul 13, 12:17 am, matturn <> wrote:
    > >> 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.

    >
    > You can even dynamically insert CSS rules with better luck than
    > iterating every element.
    >
    > --
    > -Lost
    > Remove the extra words to reply by e-mail. Don't e-mail me. I am
    > kidding. No I am not.


    This is reply
    Mahernoz, Jul 13, 2007
    #6
  7. On Jul 13, 7:17 am, -Lost <> wrote:
    > > 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.


    > 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 Dorward
    http://dorward.me.uk
    http://blog.dorward.me.uk/
    David Dorward, Jul 13, 2007
    #7
  8. matturn

    David Mark Guest

    On Jul 13, 6:13 am, David Dorward <> wrote:
    > On Jul 13, 7:17 am, -Lost <> wrote:
    >
    > > > 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.

    > > 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 Dorwardhttp://dorward.me.ukhttp://blog.dorward.me.uk/


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

    RobG Guest

    matturn wrote:
    > 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.


    --
    Rob
    "We shall not cease from exploration, and the end of all our
    exploring will be to arrive where we started and know the
    place for the first time." -- T. S. Eliot
    RobG, Jul 13, 2007
    #9
  10. On Jul 13, 12:51 pm, RobG <> wrote:
    > 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
    http://dorward.me.uk
    http://blog.dorward.me.uk/
    David Dorward, Jul 13, 2007
    #10
  11. On Jul 13, 2:51 pm, David Dorward <> wrote:
    > 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.

    --
    David Dorward
    http://dorward.me.uk
    http://blog.dorward.me.uk/
    David Dorward, Jul 13, 2007
    #11
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?VGVycnk=?=

    Changing styles sheets on a per user basis

    =?Utf-8?B?VGVycnk=?=, Feb 4, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    360
    =?Utf-8?B?VGVycnk=?=
    Feb 4, 2004
  2. Aaron Beall
    Replies:
    2
    Views:
    1,759
    Aaron Beall
    Sep 14, 2007
  3. Replies:
    8
    Views:
    111
  4. Dinsdale
    Replies:
    5
    Views:
    152
    Dinsdale
    Jan 19, 2007
  5. Michael Repucci
    Replies:
    1
    Views:
    99
    Michael Repucci
    Jul 14, 2007
Loading...

Share This Page