Caricamento casuale CSS all'aggiornamento della pagina

Question

Mi stavo chiedendo qual è il modo migliore per chiamare un file css casuale nella pagina di aggiornamento con Javascript?

Molte grazie

Answer 1

Grazie per i vostri consigli, non si rese conto che era possibile con una semplice linea di php e in realtà ha scoperto che questo metodo è stato piuttosto breve e dolce

<link href="/styles/<?php echo mt_rand(1, 5); ?>.css" rel="stylesheet" type="text/css"/> 

trovato qui, http://forum.mamboserver.com/showthread.php?t=61029

Molte grazie

ps. A List Apart hanno anche un modo piuttosto semplice e geniale per alternare le immagini, http://www.alistapart.com/articles/randomizer/

Answer 2

aggiungere un elemento <link> su document.ready.

var randomFileName=Math.random(); // or whatever 

$(document).ready(function() { 
    $('head').append('<link rel="stylesheet" type="text/css" href="' + randomFileName + '.css">'); 
}); 

Non testato. Come accennato in precedenza, è probabilmente un'idea migliore (leggi: più compatibile) per uno script lato server per sputare un nome di file casuale direttamente nell'HTML della pagina invece di usare l'inganno JS.

Answer 3

Se stai usando PHP, si può leggere la directory CSS e scegliere un file casuale come questo:

<?php 
$css_dir = '/css'; 
$files = array(); 

foreach(glob($cssdir.'/*.css') as $file) 
{ 
    $array[] = $file; 
} 

echo '<link rel="stylesheet" type="text/css" href="' . array_rand($files, 1) . '">'; 
?> 

Answer 4

var link = []; 
link[0] = "http://site.com/css/style1.css"; 
link[1] = "http://site.com/css/style2.css"; 
link[2] = "http://site.com/css/style3.css"; 


$(function() { 
    var style = link[Math.floor(Math.random() * link.length)]; 
    $('<link />',{ 
     rel :'stylesheet', 
     type:'text/css', 
     href: style 
    }).appendTo('head'); 
}); 

Edit: Grazie Basil Siddiqui!

var link = []; 
link[0] = "http://site.com/css/style1.css"; 
link[1] = "http://site.com/css/style2.css"; 
link[2] = "http://site.com/css/style3.css"; 


$(function() { 
    var style = link[Math.floor(Math.random() * link.length)]; 
    if (document.createStyleSheet){ 
     document.createStyleSheet(style); 
    }else{ 
     $('<link />',{ 
      rel :'stylesheet', 
      type:'text/css', 
      href: style 
     }).appendTo('head'); 
    } 
}); 

Answer 5

si può fare questo mediante la generazione di collegamento casuale usando solo javascript

<p id="demo"></p> 

<script> 
var r=Math.random(); 
var x=document.getElementById("demo") 
if (r>0.5) 
{ 
x.innerHTML="<a href='http://w3schools.com'>Visit W3Schools</a>"; 
} 
else 
{ 
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>"; 
} 
</script> 

Answer 6

Se si desidera utilizzare javascript il modo migliore è quello di caricare tutti gli stili casuali in un singolo file nel modo normale.

Poi fallo precedere tutti i css casuale con un numero, ad esempio:

.random-1 h1 { 
    color: blue; 
} 
.random-2 h1 { 
    color: red; 
} 
/* ... etc... */ 

Poi basta aggiungere una classe casuale per il corpo con javascript.

document.getElementsByTagName('body')[0].className+=' random-' + Math.floor((Math.random() * 10) + 1); 

Questo dovrebbe limitare i problemi di caricamento e rendering e non è necessario preoccuparsi di quando chiamare il javascript. (in più hai la possibilità di passare a un altro stile casuale con più javascript)

(I problemi di rendering dipendono dal tipo di modifiche che stai apportando - sebbene questo non sia diverso dal nascondere e mostrare gli oggetti DOM che vedi su molti siti Web.)