Random CSS via JS

Question

J'essaie de faire tourner des feuilles de CSS aléatoires via JS - J'ai le script suivant mais quand je l'utilise - ça ne semble pas fonctionner?

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

Appréciez une aide?

Answer 1

Essayez de créer l'élément link et programmation annexant à la tête:

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 page est déjà affichée lorsque vous "ajoutez" la feuille de style. Ce type de substitution est préférable sur le serveur.

Answer 3

Je ne suis pas un expert JavaScript, mais peut-être ne trouve-t-il pas css dans la fonction. Donc vous devez le déclarer avant la fonction?

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

Il y a une technique très agréable pour passer avec les feuilles de style jQuery here. Il peut être facilement combiné avec votre randomiseur.

Answer 5

Non, cela fonctionne.

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! 

dans 1.css

 
* 
{ 
    color: Red; 
} 

dans 2.css

 
* 
{ 
    border: solid 2px green ; 
} 

dans 3.css

 
* 
{ 
    font-size: 40em; 
} 

dans 4.css

 
* 
{ 
    border: solid 5px red ; 
} 

Answer 6

À moins que vous devez faire pour une raison quelconque, il côté client, faites-le serveur.

Answer 7

L'élément de liaison doit être à l'intérieur de l'élément de tête pour que cela fonctionne, document.createElement /element.append

Answer 8

Une petite bête peut-être, mais vous voulez probablement:

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

Answer 9

Si votre CSS ne varie pas beaucoup, vous pouvez faire comme moi et ont le CSS généré de manière aléatoire à chaque fois que la page est chargée

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

Sauf vôtre serait évidemment être adapté à votre propre site.