Forse non tutti sanno che si può creare interazione tra CSS e Javascript, e ciò ci permette di creare dei simpatici giochi di animazione e di controllo degli elementi in una pagina. Ad esempio recuperare o settare l’altezza di un DIV, che solitamente è automatica. O ancora creare dei banner espandibili.
La prima cosa però da fare è riuscire ad avere una funzione standard in grado di farvi puntare in modo corretto ad un oggetto del DOM (Document Object Model), e che sia cross-browser, ciò funzioni in tutti i browser.
Io la mia l’ho chiamata myLayer, e ve la regalo: al massimo se volete offrirmi uno spritz vi basta cliccare sul bicchiere 🙂
function myLayer (x){
if(document.layers){
// browser="NN4";
lay=document.layers[x];
}
if(document.all){// browser="IE";
lay=eval("document.all." + x);
}
if(!document.all && document.getElementById){// browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
lay=document.getElementById(x);
}
return lay;
}
Il funzionamento è semplicissimo. Passate alla funzione myLayer la stringa con l’id dell’elemento che volete sia restituito. Attenzione!!! E’ assolutamente fondamentale che gli ID degli elementi HTML siano univoci, cioè che non ci siano più elementi con lo stesso ID.
Ora passiamo a come impostare una proprietà CSS:
<script type="text/javascript"><oggetto>.style.<nome_proprietà> = "<valore>";</script>
Un esempio:
<script type="text/javascript">mioDiv.style.width = "100px";</script>
Usando la funzione myLayer diventa:
<script type="text/javascript">myLayer("mioDiv").style.width = "100px";</script>
Ora vi resta solo di indiduare la corrispondenza tra i nomi delle proprietà CSS e i corrispondenti nomi in JS. Ho pensato anche questa volta di darvi un consiglio… In ogni caso vi elenco quelli più utilizzati, che vi permettono di ricostruire gli altri. La tecnica di riscrittura comunque è la camelCase, con iniziale minuscola, rimuovendo il trattino (-). Okkio che JS è casesensitive!
| CSS | JavaScript |
| background-color | backgroundColor |
| border | border |
| border-bottom | borderBottom |
| font-family | fontFamily |
| height | height |
| visibility | visibility |
| width | width |
Mi sembra tutto molto semplice no? Se ci sono dubbi, sono a vostra disposizione:
me lo sono meritato lo spritz o no? 🙂
Facebook
Blog