Casuale CSS via JS

Question

Sto provando a ruotare fogli CSS casuali via JS - Ho il seguente script ma quando lo sto usando - non sembra funzionare?

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]); 

Apprezzare qualsiasi aiuto?

Answer 1

tenta di creare l'elemento link di programmazione e aggiungendo alla testa:

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 pagina è già visualizzata quando si aggiunge il foglio di stile. Questo tipo di sostituzione è meglio eseguita sul server.

Answer 3

Non sono un esperto di JavaScript, ma forse non trova css all'interno della funzione. Quindi devi dichiararlo prima della funzione?

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

C'è una bella tecnica per la commutazione fogli di stile con jQuery here. Può essere facilmente combinato con il tuo randomizzatore.

Answer 5

No, funziona.

in 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! 

in 1.css

 
* 
{ 
    color: Red; 
} 

in 2.css

 
* 
{ 
    border: solid 2px green ; 
} 

in 3.css

 
* 
{ 
    font-size: 40em; 
} 

in 4.css

 
* 
{ 
    border: solid 5px red ; 
} 

Answer 6

A meno che non hanno a che fare lato client per qualche motivo, lo fanno sulla server.

Answer 7

L'elemento di collegamento deve essere all'interno dell'elemento testa per farlo funzionare, document.createElement /element.append

Answer 8

A pignoli forse, ma probabilmente si desidera:

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

Answer 9

Se il CSS non varia di molto, si potrebbe fare come ho fatto io e hanno il CSS generato in modo casuale ogni volta che la pagina viene caricata

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

Tranne vostro sarebbe ovviamente adattata per soddisfare il proprio sito.