Apply style changes to a whole CSS class

Discussion in 'Javascript' started by Waffeloo, Sep 19, 2005.

  1. Waffeloo

    Waffeloo Guest

    Hi,
    I would like an event to trigger a change the style of all the elements that
    belong to some CSS class.

    I know it is possible to change the class of an element, for example with:
    <script language=javascript>
    function changeclass()
    {document.getElementById(id).className="class_id";}
    </script>
    <input type=checkbox onclick="javascript:changeclass()">

    But this can only change one element. I would like to change the
    "property:list" pairs of a CSS class, so that changes can apply to more
    than one element.

    Is it possible with javascript?
    Waffeloo, Sep 19, 2005
    #1
    1. Advertising

  2. Waffeloo

    ASM Guest

    Waffeloo wrote:
    > Hi,
    > I would like an event to trigger a change the style of all the elements that
    > belong to some CSS class.
    >
    > I know it is possible to change the class of an element, for example with:
    > <script language=javascript>
    > function changeclass()
    > {document.getElementById(id).className="class_id";}
    > </script>
    > <input type=checkbox onclick="javascript:changeclass()">


    function changeclass(elem,newClass)
    {document.getElementById(elem).className=newClass;}
    </script>
    <input type=checkbox onclick="javascript:changeclass('div_1','spec_9')">

    > But this can only change one element. I would like to change the
    > "property:list" pairs of a CSS class, so that changes can apply to more
    > than one element.
    >
    > Is it possible with javascript?


    I think you can't modiy properties of a class defined
    (except, perhaps with IE and sheetStyle.rules ?)

    You can catch all tags collection of the page
    and for each tag with a certain class, change it :

    var D = document.getElementsByTagName('*');
    for(var i=0;i<D.length;i++)
    if(D.className=='truc') D.className="trick";

    of course you need 2 classes
    of course you need your elements have a class
    (it is not always)

    you may also search lists elements and change their styles

    var L = document.getElementsByTagName('UL')
    for(var i=0;i<L.length;i++)
    if(L.style.textDecoration=='none') D.style.textDecoration='underline';


    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Sep 19, 2005
    #2
    1. Advertising

  3. Waffeloo

    RobG Guest

    Waffeloo wrote:
    > Hi,
    > I would like an event to trigger a change the style of all the elements that
    > belong to some CSS class.
    >
    > I know it is possible to change the class of an element, for example with:
    > <script language=javascript>
    > function changeclass()
    > {document.getElementById(id).className="class_id";}
    > </script>
    > <input type=checkbox onclick="javascript:changeclass()">
    >
    > But this can only change one element. I would like to change the
    > "property:list" pairs of a CSS class, so that changes can apply to more
    > than one element.
    >
    > Is it possible with javascript?


    Yes, this thread should give you all you need:

    <URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/3daffc9ed1c3afee/f800fd5529ed50b0?q=change+CSS+style+rule&rnum=6&hl=en#f800fd5529ed50b0>




    --
    Rob
    RobG, Sep 19, 2005
    #3
  4. Waffeloo

    Waffeloo Guest

    Waffeloo wrote:

    > Hi,
    > I would like an event to trigger a change the style of all the elements
    > that belong to some CSS class.
    >
    > I know it is possible to change the class of an element, for example with:
    > <script language=javascript>
    > function changeclass()
    > {document.getElementById(id).className="class_id";}
    > </script>
    > <input type=checkbox onclick="javascript:changeclass()">
    >
    > But this can only change one element. I would like to change the
    > "property:list" pairs of a CSS class, so that changes can apply to more
    > than one element.
    >
    > Is it possible with javascript?


    Thanks for the suggestions.
    I found an elegant and dirty way: change the name of the class of the <body>
    element, and have two sets of CSS rules:

    body.class_A .flipflop { nice style }
    body.class_B .flipflop { other style }

    So I can change the style of many elements with a few lines of code.
    Waffeloo, Sep 20, 2005
    #4
    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?bnN2a2V5YW4=?=

    how to apply css class style to web controls

    =?Utf-8?B?bnN2a2V5YW4=?=, Feb 20, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    2,666
    Chris Jackson
    Feb 20, 2004
  2. OM
    Replies:
    3
    Views:
    11,395
    Phrederik
    Sep 3, 2003
  3. Shiperton Henethe
    Replies:
    5
    Views:
    1,079
    Adrienne
    Sep 19, 2003
  4. Stefan Siegl
    Replies:
    1
    Views:
    950
    Marrow
    Jul 18, 2003
  5. iwasjoeking
    Replies:
    2
    Views:
    125
    iwasjoeking
    Jun 7, 2007
Loading...

Share This Page