[resolved] replacing class

jcdevelopment

12-18-2007, 07:47 PM

I have tried looking for this but im afraid my description is a bit too long for google!

I have a div class that is in one element, for instance

.style1 {
background-color:#ffffff;
border:1px solid #000000;
}

then the element in html

<div class="style1"></div>

So now that we have gone over basic css i move to my question.. Is there a way to take the current style1 in the div and use a javascript to place it with another style.

Like if a user presses a buuton it will load a new style to that div..

if there is a site or if anyone can point me in the right direction i would really appreciate it.

Thanks guys

kansel

12-18-2007, 09:11 PM

You can change the class of a given element by modifying its className property.<style type="text/css">
.style1 { background-color:#ffffff; border:1px solid #000000; }
.style2 { background-color:#ffff00; border:1px solid #ff0000; }
</style>
<div class="style1" onclick="this.className='style2'">click me</div>If the element getting the style change is not the one getting clicked, you'll probably need to use getElementById to retrieve the right element.<div class="style1" id="block1">
<a href="#" onclick="document.getElementById('block1').className='style2';return false">
click me</a>
</div>

jcdevelopment

12-18-2007, 09:15 PM

I appreciate the help kansel, but what i am looking for is to have lets say 12 links, when clicked on all of the divs with classes change to the new class, do you understand what i mean?

kansel

12-18-2007, 09:24 PM

There are several ways to do this. If all of the links are in the same parent container, use the cascade to achieve the effect.<style type="text/css">
.style1 div { background-color:#ffffff; border:1px solid #000000; }
.style2 div { background-color:#ffff00; border:1px solid #ff0000; }
</style>
<div class="style1" id="parent" onclick="this.className='style2';return false">
<div>
<a href="#">
click me</a></div>
<div>
<a href="#">
click me</a></div>
<div>
<a href="#">
click me</a></div>
</div>If this is not what you want, do you have an example you could post?

jcdevelopment

12-18-2007, 09:59 PM

ok, im sorry im not good at explaining some things, the unfortunate thing is, is that my examples are on an intranet, so i cant give any passwords out, but let me do my best to give an example....

here is an example css

* {
margin:0px;
padding:0px;
}

body {
font-family:"Myriad Pro";
background-color:#CCCCCC;
}
h3 {
color:#000000;
background-color:#00CCCC;
}
#container {
margin:0 auto;
width:800px;
height:500px;
background-color:#FFFFFF;
}

.style1{
border:1px solid #000000;
background-color:#FFFFFF;
}
.style2{
border:1px solid #000000;
background-color:#333333;
}
.style3{
border:1px solid #000000;
background-color:#666666;
}

Ok, as you can see i have 3 different styles as classes. So my default style would be style1...

so here is what my html would look like when u enter the page

<body>
<div id="container">

<div class="style1">blah blah content</div>

</div>
</body>

hopefully you are following me so-far...

So now every thing is fine, now i know i realize i need a link lets say

<a href="#" onClick="function">Style 2</a>
<a href="#" onClick="function">Style 3</a>

ok so the user is able to change the div currently to a different style by clicking the link.

Hopefully that is better as far as describing my problem, if not let me know and i will post an image maybe explaining it better, thanks abunch...

kansel

12-18-2007, 10:29 PM

An image of what you want would help a lot. Before & after images would be even better.

jcdevelopment

12-18-2007, 11:20 PM

ok hopefully this will help, i mad it as clear as i can, if you can help or have any questions, just let me know

Trinithis

12-18-2007, 11:45 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.style1 {
border: 1px solid #000;
background-color: #fff;
}
.style2 {
border: 1px solid #000;
background-color: #333;
}
.style3 {
border: 1px solid #000;
background-color: #666;
}
</style>
</head>
<body><div>

<script type="text/javascript">

if(!Array.prototype.filter)
Array.prototype.filter = function(f /*, context*/) {
for(var r = [], i = 0, n = this.length, t = arguments[1], v; i < n; ++i)
if(f.call(t, v = this[i], i, this))
r.push(v);
return r;
};

if(!Array.prototype.forEach)
Array.prototype.forEach = function(f /*, context*/) {
for(var i = 0, n = this.length, t = arguments[1]; i < n; ++i)
f.call(t, this[i], i, this);
};

function changeClass(toClass) {
Array.prototype.filter.call(document.getElementsByTagName("div"), function(el) {
return /style\d+/.test(el.className);
}).forEach(function(el) {
el.className = toClass;
});
}

</script>

<div class="style1">div1</div>
<div class="style1">div2</div>
<div class="style1">div3</div>
<ul>
<li><a href="#" onclick="changeClass('style1');">Style 1</a></li>
<li><a href="#" onclick="changeClass('style2');">Style 2</a></li>
<li><a href="#" onclick="changeClass('style3');">Style 3</a></li>
</ul>

</div>
</body>
</html>

jcdevelopment

12-19-2007, 02:57 PM

Thank you, im going to add this and see what happens, i will keep you updated...

"Awsome it worked, thank you, i know it was a bit of a beat down, but thankyou for everyones suggestions!!"