/    Sign up×
Community /Pin to ProfileBookmark

Javascript code needed for swapping css styles.

Copy linkTweet thisAlerts:
Aug 24.2007

Is there an easy way to do the following? Say I have 4 divs on a page with clickable images in each one. When I click on one of them I want the div style to change. If I click on another one after that I want the clicked div to change style and the previously clicked div to return back to it’s old style (or change to a new style either way). How do I keep track of what id was previously clicked so I can change the style back?

I’m sure you can use and array or something, but I don’t know the cleanest way to code this.

Thanks!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@felgallAug 24.2007 — Do you mean substituting the entire stylesheet so that the page looks completely different? If so then most browsers (all but IE) have a menu option for changing without needing any code beyond defining the alternates in the HTML. If you code it that way then a small function will allow you to also switch stylesheets easily from links in the page. See http://javascript.about.com/library/blswitch.htm for more info.
Copy linkTweet thisAlerts:
@KorAug 24.2007 — the main idea is to use a function which will set all the divs to the default state before you alter the clicked one. A very simplified example could be:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
.default{
width:200px;
background:#00ff00;
margin:2px;
}
.altered{
width:200px;
background:#ffff00;
margin:2px;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function attEv(){
var d=document.getElementById('container').getElementsByTagName('div');
for(var i=0;i&lt;d.length;i++){
d[i].onclick=function(){
defaultAll();
this.className='altered';
}
}
}
function defaultAll(){
var d=document.getElementById('container').getElementsByTagName('div');
for(var i=0;i&lt;d.length;i++){
d[i].className='default';
}
}
onload=attEv;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;div class="default"&gt;one&lt;/div&gt;
&lt;div class="default"&gt;two&lt;/div&gt;
&lt;div class="default"&gt;three&lt;/div&gt;
&lt;div class="default"&gt;four&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

The main problem now is to isolate somehow those divs and to create the collection of those divs. This is up to your HTML code... Another problem will arise if you have another javascript codes which uses also the window.[B]onload[/B] event, case in which we must to see your whole picture in order to change a little bit the structure :-)
Copy linkTweet thisAlerts:
@jtownauthorAug 24.2007 — Ahhh ... I could change all the styles to the default first and then change only the clicked one. That might be easier than keeping track of the last clicked div. No?
Copy linkTweet thisAlerts:
@KorAug 25.2007 — Ahhh ... I could change all the styles to the default first and then change only the clicked one. That might be easier than keeping track of the last clicked div. No?[/QUOTE]
Exactly.
Copy linkTweet thisAlerts:
@KorAug 25.2007 — There is another possibility, probably shorter: to change all divs to the default state [I]except[/I] the clicked one which will be altered, in the same loop:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
.default{
width:200px;
background:#00ff00;
margin:2px;
}
.altered{
width:200px;
background:#ffff00;
margin:2px;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function attEv(){
var d=document.getElementById('container').getElementsByTagName('div');
for(var i=0;i&lt;d.length;i++){
d[i].onclick=function(){
changeClass(this);
}
}
}
[COLOR="Navy"]function changeClass(obj){
var d=document.getElementById('container').getElementsByTagName('div');
for(var i=0;i&lt;d.length;i++){
d[i].className=obj==d[i]?'altered':'default';
}
}[/COLOR]
onload=attEv;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;div class="default"&gt;one&lt;/div&gt;
&lt;div class="default"&gt;two&lt;/div&gt;
&lt;div class="default"&gt;three&lt;/div&gt;
&lt;div class="default"&gt;four&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @jtown spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...