CSS aleatorio a través de JS

Question

Estoy intentando rotar hojas de CSS aleatorias a través de JS. Tengo el siguiente script, pero cuando lo estoy usando, ¿parece que no funciona?

function getRand(){ 
    return Math.round(Math.random()*(css.length-1)); 
} 
var css = new Array(
'<link rel="stylesheet" type="text/css" href="css/1.css">', 
'<link rel="stylesheet" type="text/css" href="css/2.css">', 
'<link rel="stylesheet" type="text/css" href="css/3.css">', 
'<link rel="stylesheet" type="text/css" href="css/4.css">' 
); 
rand = getRand(); 
document.write(css[rand]); 

agradecería cualquier ayuda?

Answer 1

intenta crear el elemento link programación y añadiendo a la cabeza:

function applyRandCSS(){ 
    var css = ["css/1.css", "css/2.css", "css/3.css", "css/4.css"]; 
    var randomFile = css[Math.round(Math.random()*(css.length-1))]; 
    var ss = document.createElement("link"); 

    ss.type = "text/css"; 
    ss.rel = "stylesheet"; 
    ss.href = randomFile; 

    document.getElementsByTagName("head")[0].appendChild(ss); 
} 

Answer 2

La página ya se muestra cuando "agrega" la hoja de estilo. Este tipo de sustitución se realiza mejor en el servidor.

Answer 3

No soy un experto en JavaScript, pero tal vez no encuentre css dentro de la función. Entonces, ¿tienes que declararlo antes de la función?

var css = new Array(
'<link rel="stylesheet" type="text/css" href="css/1.css">', 
'<link rel="stylesheet" type="text/css" href="css/2.css">', 
'<link rel="stylesheet" type="text/css" href="css/3.css">', 
'<link rel="stylesheet" type="text/css" href="css/4.css">' 
); 

function getRand(){ 
    var css 
    return Math.round(Math.random()*(css.length-1)); 
} 

rand = getRand(); 
document.write(css[rand]); 

Answer 4

Hay una muy buena técnica para el cambio de estilo con jQuery here. Se puede combinar fácilmente con su aleatorizador.

Answer 5

No, funciona.

en cssTest.html:

 
HI! 

<script> 
function getRand(){ 
    return Math.round(Math.random()*(css.length-1)); 
} 
var css = new Array(
'<link rel="stylesheet" type="text/css" href="1.css">', 
'<link rel="stylesheet" type="text/css" href="2.css">', 
'<link rel="stylesheet" type="text/css" href="3.css">', 
'<link rel="stylesheet" type="text/css" href="4.css">' 
); 
rand = getRand(); 

document.write("Choosing " + rand) ; 
document.write(css[rand]); 

</script> 

HELLO! 

en 1.css

 
* 
{ 
    color: Red; 
} 

en 2.css

 
* 
{ 
    border: solid 2px green ; 
} 

en 3.css

 
* 
{ 
    font-size: 40em; 
} 

en 4.css

 
* 
{ 
    border: solid 5px red ; 
} 

Answer 6

A menos que tenga que hacerlo del lado del cliente, por alguna razón, lo hacen en el servidor.

Answer 7

El elemento de enlace debe estar dentro del elemento de cabeza para que funcione, document.createElement /element.append

Answer 8

Un hilar fino tal vez, pero es probable que desee:

function getRand() { 
    return parseInt(Math.random()*css.length); 
} 

Answer 9

Si tu CSS no varía en gran medida, se podría hacer como yo y tienen la CSS genera aleatoriamente cada vez que se carga la página

function mutate() { 

var font = new Array(); 
    font[0] = 'monospace'; 
    font[1] = 'arial'; 
    font[2] = 'verdana'; 
    font[3] = 'trebuchet-ms'; 
    font[4] = 'lucida grande'; 
    font[5] = 'calibri'; 
    font[6] = 'bitstream charter'; 
    font[7] = 'liberation sans'; 
    font[8] = 'Mona'; 
    font[9]= 'MS Pgothic'; 
    font[11]= 'helvetica'; 
    font[11]= 'Dejavu sans'; 
    var whichbfont = Math.floor(Math.random()*(font.length)); 

/* Random bgcolor maker */ 
function bgcolour() { 
    var bred = Math.floor(128+Math.random()*128); 
    var bgreen = Math.floor(128+Math.random()*128); 
    var bblue = Math.floor(128+Math.random()*128); 
    return 'rgb('+bred+', '+bgreen+', '+bblue+')'; 
} 
var bgcolor = bgcolour(); 

/* Random bgcolor maker */ 
function bcolour() { 
    var red = Math.floor(Math.random()*128); 
    var green = Math.floor(Math.random()*128); 
    var blue = Math.floor(Math.random()*128); 
    return 'rgb('+red+', '+green+', '+blue+')'; 
} 
var bcolor = bcolour; 

document.write ('<style type=\"text/css\">'+ 
'b,a \n'+ 
'{font-family: '+font[whichbfont]+' !important; color: '+bcolor+' !important;}\n'+ 
'body {background-color: '+bgcolor+';!important}\n'+ 
'</style>'); 
} 

Excepto el suyo, obviamente, se adaptarían para adaptarse a su propio sitio.