SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using javascript to change CSS?

    Is it possible to use js to change css? What I'm trying to do is pretty simple, I have a timer with a start and a stop button, and would like to set certain intervals where the css will automatically change the background-color css property. For example at 60 seconds change to one green, at 120 seconds change to orange, etc..

    Here's my existing code.


    <html>
    <head>
    <script type="text/javascript">
    var c=0;
    var t;
    var timer_is_on=0;

    function timedCount()
    {
    document.getElementById('txt').value=c;
    c=c+1;
    t=setTimeout("timedCount()",1000);
    }

    function doTimer()
    {
    if (!timer_is_on)
    {
    timer_is_on=1;
    timedCount();
    }
    }

    function stopCount()
    {
    clearTimeout(t);
    timer_is_on=0;
    }
    </script><script type="text/javascript">
    function resizeWindow()
    {
    top.resizeTo(500,300);
    }
    </script>
    <style type="text/css">
    body {background-color: RGB(100,100,222);}
    </style>
    </head>

    <body>
    <form>
    <input type="button" value="Start count!" onclick="doTimer()" />
    <input type="text" id="txt" />
    <input type="button" value="Stop count!" onclick="stopCount()" />
    </form>


    </body>
    </html>

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,287
    Mentioned
    182 Post(s)
    Tagged
    4 Thread(s)
    Javascript libraries like jQuery and Prototype abstract this and make it REALLY SIMPLE to do.
    But using bare-bones Javascript you can access the "style.backgroundColor" attribute of a DOM element.
    In addition, you can apply a new CSS class to an element with "element.className=newClass"
    Try a Google Search like this one for all the details you need.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •