Cargar CSS al azar en la página de actualización

Question

Me preguntaba ¿cuál es la mejor manera de llamar a un archivo CSS al azar en la página de actualización con Javascript?

Muchas gracias

Answer 1

Gracias por su consejo, no se dio cuenta que era posible con una simple línea de php y en realidad encontró que este método era bastante corto y dulce

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

encontrado aquí, http://forum.mamboserver.com/showthread.php?t=61029

Muchas gracias

ps. A List Apart también tienen una forma bastante simple y brillante para cambiar las imágenes, http://www.alistapart.com/articles/randomizer/

Answer 2

anexar un elemento <link> en document.ready.

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

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

Untested. Como se mencionó anteriormente, es probablemente una idea mejor (leer: más compatible) para un script del lado del servidor escupir un nombre de archivo aleatorio directamente en el HTML de la página en lugar de usar trucos de JS.

Answer 3

Si está usando PHP, se puede leer el directorio de CSS y elegir un archivo aleatorio como esto:

<?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'); 
}); 

Editar: Gracias albahaca 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

Usted puede hacer esto mediante la generación de enlace al azar usando sólo 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

Si desea utilizar Javascript la mejor manera es para cargar todos los estilos aleatorios en un solo archivo de la manera normal.

Luego agregar el prefijo a todos los css al azar con un número como:

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

Después, simplemente agregar una clase al azar al cuerpo con javascript.

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

Esto debería limitar los problemas de carga y procesamiento, y no tiene que preocuparse por cuándo llamar al javascript. (Además, tiene la opción de cambiar a otro estilo aleatorio con más javascript)

(Los problemas de representación dependerán de qué tipo de cambios esté realizando, aunque esto no es diferente de la ocultación y visualización de los objetos DOM que ve en muchos sitios web.)