SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    ********* Ornithologist AtomicPenguin's Avatar
    Join Date
    May 2002
    Location
    Vancouver, BC
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing class style with js

    Hi again :-)

    How would I do this. I have a style element defined in my page, like so:

    .btnOver { background-color: pink; }

    How would I change the background-color attribute dynamically with javascript, say, with an onclick handler? I'm stumped.

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtomicPenguin
    Hi again :-)

    How would I do this. I have a style element defined in my page, like so:

    .btnOver { background-color: pink; }

    How would I change the background-color attribute dynamically with javascript, say, with an onclick handler? I'm stumped.

    this works

    Code:
    	 function swapclass(what, newclass)
    	 {
    		what.className = newclass;
    	 }
    Code:
    	<style>
    	.classA {font-size:12pt;}
    	.classB {font-size:24pt;}
    	</style>
    Code:
    	<div class="classA" onmouseover="swapclass(this, 'classB')">mouseover</div>

  3. #3
    ********* Ornithologist AtomicPenguin's Avatar
    Join Date
    May 2002
    Location
    Vancouver, BC
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kind of... but it doesn't quite work in my instance.

    What I need is to be able to change the actual class attribute, thus affecting EVERY element with the class="btnOver" attribute.

    Plus I need the background-color attribute to be set dynamically...

  4. #4
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AtomicPenguin
    Kind of... but it doesn't quite work in my instance.

    What I need is to be able to change the actual class attribute, thus affecting EVERY element with the class="btnOver" attribute.

    Plus I need the background-color attribute to be set dynamically...
    Code:
    <html>
      <head>
    	<title></title>
    	<style>
    	.classA {
    			  font-size:12pt;
    			  background-color:dimgray;
    	}
    	</style>
    	<script type="text/javascript">
    	  function swapbk(color)
    	  {
    		document.styleSheets[0].rules[0].style.backgroundColor = color
    	  }
    	</script>
      </head>
      <body>
    	<div id="header" class="classA" onmouseover="swapbk('orange');" onmouseout="swapbk('blue');">
    	  color
    	</div>
      </body>
    </html>

  5. #5
    ********* Ornithologist AtomicPenguin's Avatar
    Join Date
    May 2002
    Location
    Vancouver, BC
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Marvellous! Thankyou very much, I do appreciate it!


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
  •