Change CSS Class property using javascript?

Discussion in 'Javascript' started by Noozer, Dec 5, 2004.

  1. Noozer

    Noozer Guest

    I have several tags on a webpage of the same class. If the user clicks a
    specific checkbox I'd like to be able to alter the display property of the
    class, affecting all objects of that class.

    This is an intranet application so we know that javascript will be enabled
    and the browser will be IE.

    How can I affect all the members of this class? Is there a way I can toggle
    the DISPLAY property of a class so all the elements using that class would
    be affected?

    ie:

    default.css file contains the following and is included into the HTLM
    document:

    .topicone { display:none; }
    .topictwo { display:none; }

    Relevant section of HTML code:
    <input type="checkbox" onclick="flip('topicone')'">Show me information
    about topic one.<br>
    <input type="checkbox" onclick="flip('topictwo')'">Show me information
    about topic two.<br>
    <p>Please see the following:</p>
    <p> Quick Points </p>
    <p class="topicone">This is some information about topic one.</p>
    <p class="topictwo">This is some information about topic two.</p>
    <p> Details </p>
    <p class="topicone">More information about topic one.</p>
    <p class="topicone">More information about topic one.</p>
    <p class="topictwo">This is some information about topic two.</p>
     
    Noozer, Dec 5, 2004
    #1
    1. Advertising

  2. Noozer

    RobB Guest

    "Noozer" <> wrote in message news:<k2Msd.434866$nl.289708@pd7tw3no>...
    > I have several tags on a webpage of the same class. If the user clicks a
    > specific checkbox I'd like to be able to alter the display property of the
    > class, affecting all objects of that class.
    >
    > This is an intranet application so we know that javascript will be enabled
    > and the browser will be IE.
    >
    > How can I affect all the members of this class? Is there a way I can toggle
    > the DISPLAY property of a class so all the elements using that class would
    > be affected?
    >
    > ie:
    >
    > default.css file contains the following and is included into the HTLM
    > document:
    >
    > .topicone { display:none; }
    > .topictwo { display:none; }
    >
    > Relevant section of HTML code:
    > <input type="checkbox" onclick="flip('topicone')'">Show me information
    > about topic one.<br>
    > <input type="checkbox" onclick="flip('topictwo')'">Show me information
    > about topic two.<br>
    > <p>Please see the following:</p>
    > <p> Quick Points </p>
    > <p class="topicone">This is some information about topic one.</p>
    > <p class="topictwo">This is some information about topic two.</p>
    > <p> Details </p>
    > <p class="topicone">More information about topic one.</p>
    > <p class="topicone">More information about topic one.</p>
    > <p class="topictwo">This is some information about topic two.</p>


    Not really enough information, but...IE-only:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    body {
    font: normal 90% verdana;
    }
    ..topicone {
    font: normal 80% verdana;
    color: #600;
    display: none;
    }
    ..topictwo {
    font: normal 80% verdana;
    color: #060;
    display: none;
    }

    </style>
    <script type="text/javascript">

    function IE_set_class(clanSheetame)
    {
    var re = new RegExp(clanSheetame);
    var rules, nRule,
    nRules, SS, nSheet = 0,
    nSheets = document.styleSheets.length;
    for (nSheet; nSheet < nSheets; ++nSheet)
    {
    SS = document.styleSheets.item(nSheet);
    rules = SS.rules;
    nRules = rules.length;
    for (nRule = 0; nRule < nRules; ++nRule)
    {
    rule = SS.rules.item(nRule);
    if (re.test(rule.selectorText))
    {
    for (var a = 1; a < arguments.length; a+=2)
    rule.style[arguments[a]] = arguments[a + 1];
    return;
    }
    }
    }
    }

    function toggleclass(obj)
    {
    var dval = obj.checked ? 'block' : 'none';
    IE_set_class(obj.value, 'display', dval)
    }

    onload = function()
    {//keep things in sync
    var i = 0,
    ipt,
    ipts = document.getElementsByTagName('input');
    while (ipt = ipts.item(i++))
    if (/toggle/i.test(ipt.name))
    ipt.onclick();
    }

    </script>
    </head>
    <body>
    <form>
    <input type="checkbox" name="toggle" value="topicone"
    onclick="toggleclass(this)">Show me information
    about topic one.<br>
    <input type="checkbox" name="toggle" value="topictwo"
    onclick="toggleclass(this)">Show me information
    about topic two.<br>
    <p>Please see the following:</p>
    <p> Quick Points </p>
    <p class="topicone">This is some information about topic one.</p>
    <p class="topictwo">This is some information about topic two.</p>
    <p> Details </p>
    <p class="topicone">More information about topic one.</p>
    <p class="topicone">More information about topic one.</p>
    <p class="topictwo">This is some information about topic two.</p>
    </form>
    </body>
    </html>
     
    RobB, Dec 6, 2004
    #2
    1. Advertising

  3. Noozer

    RobG Guest

    Rob B wrote:
    >
    > ...lol - I did a S&R to change var 'SSn' to 'nSheet' and it also changed
    > 'classname' to 'clanSheetame' which sounds vaguely Scottish. I am sorry.
    > :eek:


    And here I was thinking you were being creative. Shazam!

    --
    Rob
     
    RobG, Dec 6, 2004
    #3
    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. Joshua Beall
    Replies:
    1
    Views:
    474
    Bertilo Wennergren
    Dec 10, 2003
  2. Noozer
    Replies:
    10
    Views:
    2,240
    Mitja
    Oct 13, 2004
  3. Radu
    Replies:
    2
    Views:
    1,371
    =?Utf-8?B?TWlsb3N6IFNrYWxlY2tpIFtNQ0FEXQ==?=
    Jan 25, 2007
  4. Julie Siebel
    Replies:
    4
    Views:
    152
    Dr John Stockton
    Feb 25, 2004
  5. Spam Catcher
    Replies:
    4
    Views:
    170
    Darko
    Nov 21, 2007
Loading...

Share This Page