FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Editing a Css class with javascript?





Paragon
lets say that i have this css class

.myClass{
position: relative,
left:30px,
top:10px,
z-index:4;
}

and i have a bunch of elements using that class. Is there a way that i could make a button or something that would change the z-index of all those elements to 1 with javascript by changing the classes z-index instead of each individual elements z-index?
shamil
I think it is not possible to directly change properties of class with javascript. But not sure. You can use below code to change all elements individually.

Code:
<html>
<head>
   <title>openit</title>
   <style>
   .notyourClass{ color:#000066;}
   .myClass{
   position: relative;
   left:30px;
   top:10px;
   z-index:4;
   color:#FF0033;
    } 
   </style>
   <script>
   function doThis() {
   
   var divElems = document.getElementsByTagName('div');
   
   for (i=0; i<divElems.length; i++) {
      if (divElems[i].className == 'myClass') {
         if(divElems[i].style.display != 'none') divElems[i].style.display = 'none';
       else if(divElems[i].style.display != 'block') divElems[i].style.display = 'block';
         }
      }

}
   </script>
</head>
<body>
   <div class="notyourClass">NOt your class</div>
   <div class="myClass">bax1</div>
   <div class="myClass">bax2</div>
   <div class="myClass">bax3</div>
   <br>
<input type="button" value="doit" onClick="doThis()">
</body>
</html>
SystemWisdom
It is possible in a way, you can't actually change the class, but you can alter the ruleset *after* it is applied to an element (so you can change the specific styles of an individual element) with javascript.. I wrote a simple sample script to demonstrate:

Code:

<html>
<head>

<script language="JavaScript" type="text/javascript">
<!--
var flipped = false;
function switcheroo()
{
    var fg = document.getElementById("foreground");
    var bg = document.getElementById("background");
   
    fg.style.zIndex = (flipped) ? 1 : 10;
    bg.style.zIndex = (flipped) ? 10: 1;

    flipped = !flipped;
}
//-->
</script>

<style><!--

.foreground
{
    z-index: 10;
    display: block;
    width: 5em;
    height: 5em;
    position: absolute;
    top: 5em;
    left: 5em;
    background: #345;
}

.background
{
    z-index: 1;
    display: block;
    width: 5em;
    height: 5em;
    position: absolute;
    top: 8em;
    left: 8em;
    background: #89a;
    vertical-align: bottom;
}

.button
{
    display: block;
    width: 5em;
    height: 1.5em;
    position: absolute;
    top: 15em;
    left: 15em;
    background: #CCC;
    text-align: center;
    vertical-align: bottom;
}

--></style>

</head>

<body>

<div id="foreground" class="foreground">Foreground</div>
<div id="background" class="background">Background</div>

<div class="button" onclick="switcheroo()">Switch!</div>

</body>
</html>


I hope that helps!!
Related topics
Okay, I'm done trying to use CSS for layout.
Handling Css using Javascript
rollovers in CSS
CSS or Javascript?
Loading time?
Rotate images using css?
Which html editor?
CSS: class and id
acces fieldset class with javascript
About CSS and HTML editing
CSS Class problem SOLVED
help needed with css & javascript
Tooltip for Javascript or CSS
books on html, css and/or javascript
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.