Newsgroup: it.comp.lang.javascript
Titolo: setAttribute con IE

Ciao a tutti
come e' che non riesco a impostare una classe CSS con setAttribute() ?
Funziona con FF, Opera, Safari ma non con IE 7..
trovate la pagina
http://www.simplogic.eu/u.htm
o il codice di seguito
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
.contA_m_1{ width:98%; margin: 2px; background:#FFFFFF;border-right:1px 
solid #CCCCCC; border-bottom:1px solid #666600; padding-bottom:5px; 
padding-left:5px;}
.contA_m_1_testata {background-color:#f1f1f1;}
.contA_m_1_testata h1 {font:bold 14px Verdana; color: #FF3300;}
.contA_m_1_testata h1 a{color: #FF3300;}
.contA_m_1 h3{font: 12px Arial;color:#000000;}
.contA_m_1_titolo{color: #FF9900;background-color: #f1f1f1; font:bold 
14px/1.5em Verdana; padding-top:2px; padding-right:2px; padding-bottom:2px; 
padding-left:2px;}
.contA_m_1_dataOra{font:normal 12px Verdana; color:#000000;}
.contA_m_1 h2 {font:14px/1em Arial; padding:3px; }
.contA_m_1 h2 a{color:#000000; }
.contA_m_1_h2 img,object{padding-top:6px;}
.contA_m_1 h4{font:11px Arial, Helvetica, sans-serif ;padding-top:5px;}
.contA_m_1 h4 a{color:#000000}
.contA_m_2{ width:220px; background:#FFFF66;border-top:2px dotted #FF0000; 
border-bottom:2px dotted #FF0000; }
.contA_m_2_testata {background-color:#f1f1f1;}
.contA_m_2_testata h1 {font:bold 12px Verdana; color: #FF9933;}
.contA_m_2_testata h1 a{color: #FF3300;}
.contA_m_2 h3{font: 10px Arial;color:#FF6699;}
.contA_m_2_titolo{color: #FF9900;background-color: #f1f1f1; font:bold 
14px/1.5em Verdana; padding-top:2px; padding-right:2px; padding-bottom:2px; 
padding-left:2px;}
.contA_m_2_dataOra{font:normal 12px Verdana; color:#000000;}
.contA_m_2 h2 {font:14px/1em Arial; padding:3px; }
.contA_m_2 h2 a{color:#000000; }
.contA_m_2_h2 img,object{padding-top:6px;}
.contA_m_2 h4{font:11px Arial, Helvetica, sans-serif ;padding-top:5px;}
.contA_m_2 h4 a{color:#000000}
</style>
<script language="javascript" type="text/javascript">
function aggiornaModello(nmMod){
 var ArrEl=["box","testata","dataOra"];
 var ArrSt=["contA_m_[n]","contA_m_[n]_testata","contA_m_[n]_dataOra"];
 var selModA=nmMod;
  for(i=0; i<ArrEl.length; i++){
   var elCor=document.getElementById(ArrEl[i]);
  var nomNStile=ArrSt[i];
   nomNStile=nomNStile.replace("[n]",selModA.toString());
   elCor.setAttribute("class",nomNStile);
  }
}
</script>
</head>
<body>
<div id="box" class="contA_m_1 contA_id_0">
<h3 id="luogo">Luogo - occhiello a scelta</h3>
<div class="contA_m_1_testata contA_id_0_testata" id="testata"><h1><a 
href="#" id="titolo">Il titolo del box Notizia</a></h1></div>
<div class="contA_m_1_dataOra contA_id_0_dataOra" id="dataOra">21/07/2008- 
18:41</div>
<h2> <a href="#" id="immagine"><img src="img2/5x5.gif" alt="immagine di 
esempio"  title="immagine di esempio" border="0"   style="float:left; 
padding-right:3px;"  /></a>
<a href="#" id="abstract">Nel mezzo del cammin di nostra vita mi ritrovai in 
una selva oscura che la retta via era smarrita e via dicendo...</a></h2>
<div class="clearatore">&nbsp;</div>
<h4 id="listaLink"> &bull; <a href="#">Link uno </a>  &bull; <a 
href="#">Link due </a>  &bull; <a href="#">Link tre </a></h4>
</div>
<a href="javascript:aggiornaModello(2)">Cambia in giallo</a>
<a href="javascript:aggiornaModello(1)">Cambia in bianco</a>
</body>
</html>

ok, ho risolto... riporto la soluzione a buon pro per chi ci ricapita.
mentre FF e compagnia accedono all'attributo class in questo modo
oggettoDiv.setAttribute("class","laTuaNuovaClasse");
e quindi impostano laTuaNuovaClasse come classe di class
IE fa a modo suo (e te pareva !)
oggettoDiv.setAttribute("className","laTuaNuovaClasse");
e quindi per risolvere il problema si scrive un "accrocco" del genere:
oggettoDiv.setAttribute((document.all ? 'className' : 
'class'),'laTuaNuovaClasse');
e con una righa capisci che browser hai davanti e gli passi gli argomenti 
giusti.
... ma guarda un po che si deve fare per campare !
:-)
un saluto 

 ... ma guarda un po che si deve fare per campare !
Ammetto di essere un bel po' arrugginito con js ma, se mi permetti, la tua
soluzione è un accrocchio. Ciò che intendo io è: per sapere se il browser
usa o no className, allora gli chiedi se conosce la proprietà document.all?!
Sul finire degli anni 90 si faceva il browser sniffing, ora si è passati
all'object sniffing per conoscenze o parentela?! A questo punto era quasi
meglio come si faceva una volta... :-P
Io ho solo ie e ff ma ho provato con questo e va:
<script>
window.onload=function()
{
 document.getElementById("prova").className="NowTheNameIsPlutoNoMorePippo";
}
</script>
<div class="pippo" id="prova" onclick="alert(this.className)">ciao</div>
Ciao
-- 
albaserver

 Sul finire degli anni 90 si faceva il browser sniffing, ora si č passati
