Fogli di stile casuali con Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Attraverso il DOM e grazie ad una semplicissima gestione di un array casuale, possiamo impostare attraverso Javascript un foglio di stile casuale per il nostro sito, totale o parziale che sia, semplicemente andando a dividere gli stili che ci interessano in due (in questo caso) o più file CSS esterni che assegnino stili diversi agli elementi delle nostre pagine.

Per intenderci (a mero titolo esemplificativo, ma non esaustivo), immaginiamo che a parità di codice HTML la nostra pagina Web possa apparire così:

piuttosto che così:

Come vedremo di seguito, andiamo a creare due fogli di stile che chiameremo, rispettivamente, style_A.css e style_B.css. Vediamo quindi i codici dei due file CSS esterni:

/* FOGLIO DI STILE A */

body
{
    background: #FFF;
    margin: 10px;
}
h1
{
    color: #AAA;
    font: bold 15px verdana;
    margin: 0 0 10px 0;
}
p
{
    text-align: justify;
    line-height: 20px;
    color: #000;
    font: normal 13px verdana;
    margin: 0 0 10px 0;
}
/* FOGLIO DI STILE B */

body
{
    background: #000;
    margin: 10px;
}
h1
{
    color: #555;
    font: bold 25px georgia;
    margin: 0 0 10px 0;
}
p
{
    text-align: justify;
    line-height: 20px;
    color: #FFF;
    font: normal 13px tahoma;
    margin: 0 0 10px 0;
}

Come anticipato nell'incipit di questo articolo, creiamo un array per specificare il file CSS da includere, quindi rendiamo casuale la scelta e, in fine, utilizziamo il DOM per perfezionare la creazione dinamica del comando HTML che include il foglio di stile casuale.

Vediamo il codice completo:

<html>
    <title>Fogli di stile casuali con Javascript</title>
    <head>
        <script type="text/javascript">
        window.onload = function()
        {
            var quale = new Array();
            quale[0] = "A";
            quale[1] = "B";
            var casuale = Math.round((quale.length - 1) * Math.random());
            var elemento = document.getElementsByTagName("head")[0];
            var comando = document.createElement("link");
            comando.rel = "stylesheet";
            comando.type = "text/css";
            comando.href = "style_" + quale[casuale] + ".css";
            elemento.appendChild(comando);
        }
        </script>
    </head>
<body>

<h1>Fogli di stile casuali con Javascript</h1>

<p>Primo paragrafo, vediamo che effetto fa...!</p>
<p>Secondo paragrafo, vediamo anche questo che effetto fa...!</p>
<p>Terzo ed ultimo paragrafo, vediamo in fine questo che effetto fa...!</p>

</body>
</html>

Includiamo quindi il foglio di stile del sito attraverso Javascript, simulando a tutti gli effetti che nell'header della nostra pagina Web sia riportato il comando che faccia riferimento al foglio di stile A:

<link rel="stylesheet" type="text/css" href="style_A.css">

piuttosto che quello che fa riferimento al foglio di stile B:

<link rel="stylesheet" type="text/css" href="style_B.css">

Isoliamo dal contesto HTML il codice Javascript e spieghiamo i vari passaggi, precisando che tutto il codice viene gestito dalla funzione "window.onload" che gestisce il caricamento della pagina:

// Creo l'array e valorizzo il primo item con A ed il secondo con B,
// ovvero la discriminante del nome del file che li identifica
var quale = new Array();
quale[0] = "A";
quale[1] = "B";

// Rendo casuale la scelta, memorizzandola in una variabile
var casuale = Math.round((quale.length - 1) * Math.random());

// Identifico l'elemento HTML in cui mi interessa agire, ossia
// il tag head che gestisce l'intestazione della pagina Web
var elemento = document.getElementsByTagName("head")[0];

// Creo dinamicamente il tag link che consente di includere i file CSS
var comando = document.createElement("link");

// Assegno (e valorizzo) all'alamento link gli attributi rel, type
// ed href, che consente di richiamare dinamicamente il foglio di stile
// che mi interessa, costruendo dinamicamente il nome del file
comando.rel = "stylesheet";
comando.type = "text/css";
comando.href = "style_" + quale[casuale] + ".css";

// Applico la trasformazione applicando il comando (link) all'elemento (head)
elemento.appendChild(comando);

Sebbene preferisca questa soluzione rispetto a quella alternativa che vado ad esporre (trovandola più completa ed elegante), valutiamo un sistema diverso e più snello per ottenere lo stesso risultato.

Espongo il codice, isolando la porzione Javascript dal contesto HTML della pagina:

window.onload = function()
{
    var quale = new Array();
    quale[0] = "A";
    quale[1] = "B";
    var casuale = Math.round((quale.length - 1) * Math.random());
    document.write("<link rel='stylesheet' type='text/css' href='style_" + quale[casuale] + ".css'>");
}

In pratica resta la gestione casuale dell'array, ma sparisce l'utilizzo del DOM: al suo posto vado a creare fisicamente il comando "link", costruendo dinamicamente il nome del file CSS esterno da includere.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.295)

:: Breve guida a jQuery (97.739)

:: Le espressioni regolari in Javascript (84.839)

:: Gestione delle stringhe in Javascript (74.635)

:: Stampare una pagina col Dhtml (42.759)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (40.705)

:: Menu orizzontale dinamico in Dhtml (37.093)

:: Gli Array in Javascript (35.808)

:: Temporizzazioni Javascript (31.416)

:: Istruzion condizionali in Javascript: if e switch (28.812)

IN EVIDENZA
DOWNLOAD