Style toggle

This script was not written by me.

It's basically an all-encompassing toggle script. In the onclick="..." part we put in 4 parameters - the id, the javascript name of the attribute we want to change, the CSS name of the same attribute and the second state we want.

A good man called JVLB posted it on a forum and I thought it deserved its own page. Thanks JVLB.

I want to use this site to explain things, but... well, the fact is that
I don't understand this.
I think I have some studying to do.

Javascript
/*
styTog() -- a function to toggle CSS style attributes
This function accepts four parameters from the calling event:
targ_id, which is the id of the target element;
sty_attrJ, which is the style attribute's name in JavaScript syntax;
sty_attrC, which is the style attribute's name in CSS syntax;
set_val, which is the second toggle state value;

The element id, "zedSpan" is reserved for this function's use.
*/
function styTog(targ_id,sty_attrJ,sty_attrC,set_val){
var targ=document.getElementById(targ_id);
var targ_stat="";
var targ_sty="";
var attr_chk=sty_attrC.toLowerCase()
var excp_flag=0;
if(attr_chk.indexOf("color")!=-1 || attr_chk.indexOf("font")!=-1){
excp_flag=1;
if(!document.getElementById("zedSpan")){
var insSpan=document.createElement("span");
insSpan.setAttribute("id","zedSpan");
document.body.appendChild(insSpan);
}
var zS=document.getElementById("zedSpan").style
zS[sty_attrJ]=set_val;
}
if(targ.currentStyle){ //code for IE
if(excp_flag==1)set_val=zS[sty_attrJ];
targ_stat=targ.currentStyle[sty_attrJ];
}else{ //code for W3C-spec-compatible
if(excp_flag==1){
var tst_span=document.getElementById("zedSpan");
var tst_sty=document.defaultView.getComputedStyle(tst_span,"");
set_val=tst_sty.getPropertyValue(sty_attrC);
excp_flag=0;
}
targ_sty=document.defaultView.getComputedStyle(targ,"");
targ_stat=targ_sty.getPropertyValue(sty_attrC);
}
targ_stat!=set_val ? targ.style[sty_attrJ]=set_val : targ.style[sty_attrJ]="";
}
HTML
<div id="styletoggle">
<h1>Style toggle</h1>
<!-- the four parameters being passed to the styTog() function are: the target element's id,
the JavaScript attribute name, the CSS attribute name, and the value for the second toggle state -->
<div id="styletogglebuttons">
<button onclick="styTog('divOne','visibility','visibility','hidden');">visibility</button>
<button onclick="styTog('span1Div2','display','display','none');">display</button>
<button onclick="styTog('divThree','marginTop','margin-top','40px');">margin top</button>
<button onclick="styTog('divThree','backgroundColor','background-color','#333');">background</button>
<button onclick="styTog('span1Div3','fontSize','font-size','2em');">font-size</button>
</div>
<div id="divOne">
<div id="divTwo">
<p>This script was not written by me.</p><span id="span1Div2">It's basically an all-encompassing toggle script. In the onclick="..." part we put in 4 parameters - the id, the javascript name of the attribute we want to change, the CSS name of the same attribute and the second state we want.</span><p>A good man called JVLB posted it on a forum and I thought it deserved its own page. Thanks JVLB.</p>
</div>
<div id="divThree">
<p>I want to use this site to explain things, but... well, the fact is that <br /><span id="span1Div3">I don't understand this.</span><br /> I think I have some studying to do.</p>
</div>
</div>
</div>
CSS
#styletogglebuttons {
width:500px;
margin:10px auto;
}
#styletogglebuttons button {
background:transparent;
width:18%;
}
#divOne{
border:1px solid #333;
margin:0 auto;
display:block;
width:500px;
padding:10px;
}
#divThree{
color:white;
width:340px;
background:#990066;
margin:auto;
border:4px groove #fff;
font-weight:bold;
padding:10px;
text-align:center;
}

Comments

#1
2005-09-11 James says :

Oh dear, the clicky thing breaks the purple block at the top of here frown

Shouldn't be much hassle, but I just thought you might like to know.

Take Care
--James

#2
2005-09-11 BonRouge says :

Oh dear, the clicky thing breaks the purple block at the top of here frown
*fixed* (^_^)/

#3
2006-06-12 Balancedi says :

This is very cool but the "display" button won't toggle back on in Safari. I don't know why. Everthing else works in Safari. All the buttons work good in IE6, Firefox1.5 and NS7.

#4
2006-06-12 BonRouge says :

I would love to help, but I never did to take the time to figure this out, so I still don't understand it. I'm glad it (mostly) works for you though.

Comment form

Please type the word 'sexy' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url