Alter the properties of a CSS class?

Discussion in 'HTML' 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?

    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

    SpaceGirl Guest

    Noozer wrote:
    > 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?
    >
    > 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>
    >
    >


    Yes, you can modify any CSS property on the fly.

    Give the items you want to change a unique ID and you can selected them
    in JS.

    <div id="topic1">content</div>
    <a href="#" onclick="switchBackground();">click here to change the
    background</a>


    In your code (for example);


    <script type="text/javascript>

    function switchBackground() {

    myDiv = document.getElementById("topic1");

    if (myDiv.style.backgroundColor != "black") {

    myDiv.style.backgroundColor = "black";

    } else {

    myDiv.style.backgroundColor = "white";

    }

    </script>

    This would change the background color of that div to black.

    Now, you can write a simple loop around this to scan through ALL divs on
    the page and change the properties of them, or even change the classes
    rather than properties...


    myDiv.class = "highlighted";


    ....would also work if you have a class called highlighted in your CSS.

    You can actually modify anything inside the DOM using this technique.

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Dec 5, 2004
    #2
    1. Advertising

  3. Noozer

    Noozer Guest

    "SpaceGirl" <> wrote in message
    news:...
    > Noozer wrote:
    > > 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?
    > >
    > > 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>
    > >
    > >

    >
    > Yes, you can modify any CSS property on the fly.
    >
    > Give the items you want to change a unique ID and you can selected them
    > in JS.
    >
    > <div id="topic1">content</div>
    > <a href="#" onclick="switchBackground();">click here to change the
    > background</a>
    >
    >
    > In your code (for example);
    >
    >
    > <script type="text/javascript>
    >
    > function switchBackground() {
    >
    > myDiv = document.getElementById("topic1");
    >
    > if (myDiv.style.backgroundColor != "black") {
    >
    > myDiv.style.backgroundColor = "black";
    >
    > } else {
    >
    > myDiv.style.backgroundColor = "white";
    >
    > }
    >
    > </script>
    >
    > This would change the background color of that div to black.
    >
    > Now, you can write a simple loop around this to scan through ALL divs on
    > the page and change the properties of them, or even change the classes
    > rather than properties...
    >
    >
    > myDiv.class = "highlighted";
    >
    >
    > ...would also work if you have a class called highlighted in your CSS.
    >
    > You can actually modify anything inside the DOM using this technique.


    Appreciated, but is there any way to do this without having to specify ID's
    for all the related elements? Much of the content is dynamically generated
    and generating DIV's would be a pain.

    Thx
    Noozer, Dec 6, 2004
    #3
  4. On Mon, 06 Dec 2004 14:59:29 +0000, Noozer wrote:

    >
    > Appreciated, but is there any way to do this without having to specify ID's
    > for all the related elements? Much of the content is dynamically generated
    > and generating DIV's would be a pain.
    >
    > Thx


    I didn't read in detail, but these links might help you (and they might
    not):

    <http://www.webmasterworld.com/forum91/1729.htm>
    <http://www.google.com/search?q=getelementbyclass&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US:eek:fficial>

    later...

    --
    Jeffrey D. Silverman |
    Website | http://www.newtnotes.com

    Drop "PANTS" to reply by email
    Jeffrey Silverman, Dec 6, 2004
    #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. Kersh

    Alter Rendered HTML for page

    Kersh, Jul 24, 2003, in forum: ASP .Net
    Replies:
    6
    Views:
    500
    John Saunders
    Aug 6, 2003
  2. vturner
    Replies:
    4
    Views:
    21,060
    Mike Schilling
    Sep 21, 2004
  3. SuperZE
    Replies:
    5
    Views:
    331
    SuperZE
    Oct 6, 2008
  4. Steven G. Harms
    Replies:
    7
    Views:
    169
    Robert Klemme
    Feb 17, 2008
  5. -berlin.de
    Replies:
    0
    Views:
    136
    -berlin.de
    Jun 30, 2007
Loading...

Share This Page