[Script] Attivare/disattiva un CSS

[span]

Ciao, ho fatto il mio primo scrippettino DOM che al primo click carica un foglio di stile e al secondo lo disattiva.

Apparentemente funziona, ma vi volevo chiedere una opinione sullo stile di scrittura del codice: è un po' contorto? nell'onclick=function è normale mettere tanta roba (andrebbe aggiunto anche il codice per settare il cookie)? O è meglio spostare in un'altra funzione?


HTML:

<ul id="jsmenu">[*]Impaginazione per piccoli schermi[/list]

Script:

function addcss(){
    var l, a;
    a = document.getElementById("jsmenu").getElementsByTagName("a")[0];
    l=document.createElement("link");
    l.setAttribute("type","text/css");
    l.setAttribute("rel","stylesheet");
    l.setAttribute("media","all");
    document.getElementsByTagName("head")[0].appendChild(l);
    change(l,a);
}
function change(l,a){
    var url, sh, at, i;
    sh = a.href;
    a.href="#";
    if(/modif/.test(a.className)){
        a.onclick = function(){
                                l.removeAttribute("href");
                                a.className = "init";
                                a.href = sh;
                                a.replaceChild(document.createTextNode('Impaginazione per piccoli schermi'), a.firstChild);
                                change(l,a);
        };
    } else {
        url = sh.substring(sh.indexOf("=")+1, sh.length);
        a.onclick = function(){
                                l.setAttribute("href",url);
                                a.className = "modif";
                                a.href = sh;
                                a.replaceChild(document.createTextNode('Impaginazione a due colonne'), a.firstChild);
                                change(l,a);
        };
    }
}
window.onload=addcss; 

[pierofix]

Ti dico quali sono le cose secondo me migliorabili, in seguito a quanto riscontrato durante la lettura del tuo script:

1. i nomi delle variabili; che ne dici di usare nomi magari un po' più lunghi, ma maggiormente descrittivi?
   
2. l'ordine delle funzioni; visto che addcss() richiama change(), non credi sia più intuitivo mantenere l'ordine di 'nascita' anche nel codice?
   
3. vedo due porzioni di codice (negli onclick) parecchio simili: forse si potrebbe provare a condensarle in un'unica funzione, richiamabile con argomenti diversi.

[span]

Grazie Piero

[pierofix]

No, no, che 'grazie'. Correggi, veloce, che poi torniamo a ragionarci su.

[span]

Originariamente inviato da pierofix
No, no, che 'grazie'. Correggi, veloce, che poi torniamo a ragionarci su.

è che mi convince solo il punto "C"

[iguane]

Originariamente inviato da span
è che mi convince solo il punto "C"

Il solito pirla

[pierofix]

Parliamone.

[span]

Originariamente inviato da pierofix
Parliamone.

sto provando a semplificarla, ma più vado avanti più mi sembra incasinata

[span]

Tipo questa... non si può considerare propriamente una semplificazione, giusto?

function addlink(){
// Crea un elemento LINK, e prende l'elemento Ancor su cui applicare gli eventi
    var link, a;
    a = document.getElementById("jsmenu").getElementsByTagName("a")[0];
    link=document.createElement("link");
    link.setAttribute("type","text/css");
    link.setAttribute("rel","stylesheet");
    link.setAttribute("media","all");
    document.getElementsByTagName("head")[0].appendChild(link);
    change(link,a);
}
function change(link,a){
// Individua quale deve essere l'azione dell'ancora in base alla classe
// e richiama la funzione opportuna
    var cssfile, starthref, i;
// Salva l'attributo HREF prima di rimpiazzarlo con #
// sarà da ripassare a questa funzione ogni volta, per ricavare il nome del file CSS
    starthref = a.href;
    a.href="#";
// Verifica se la classe dell'ancora è "modif" (il file CSS è stato caricato) o "init"
    if(/modif/.test(a.className)){
        a.onclick = function(){ removeCss(link,a,starthref) };
    } else {
// Ricava il nome del file CSS dal href dell'ancora
        cssfile = starthref.substring(starthref.indexOf("=")+1, starthref.length);
        a.onclick = function(){ addCss(link,cssfile,a,starthref) };
    }
}
function removeCss(link,a,starthref){
// Rimuove l'attributo href in LINK, cambia la classe ed il testo del link e ritorna
// alla funzione change()
    link.removeAttribute("href");
    a.className = "init";
    a.href = starthref;
    a.replaceChild(document.createTextNode('Impaginazione per piccoli schermi'), a.firstChild);
    change(link,a);
}
function addCss(link,cssfile,a,starthref){
// Setta l'attributo href in LINK, cambia la classe ed il testo del link e ritorna
// alla funzione change()
    link.setAttribute("href",cssfile);
    a.className = "modif";
    a.href = starthref;
    a.replaceChild(document.createTextNode('Impaginazione a due colonne'), a.firstChild);
    change(link,a);
} 

window.onload=addlink; 

[span]

Originariamente inviato da pierofix

1. l'ordine delle funzioni; visto che addcss() richiama change(), non credi sia più intuitivo mantenere l'ordine di 'nascita' anche nel codice?

a e c ci ho provato, in questo punto non sono convinto, prima crea l'elemento LINK, poi chiama la funzione descritta appena sotto... no?