Losowe CSS poprzez JS

Question

Próbuję obrócić losowe arkusze CSS przez JS - mam następujący skrypt, ale kiedy go używam - to nie wydaje się działać?

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

Doceniam każdą pomoc?

Answer 1

spróbować stworzyć element link programowo i dołączenie jej do głowy:

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

Strona jest już renderowana po "dodaniu" arkusza stylów. Ten rodzaj zastąpienia najlepiej wykonać na serwerze.

Answer 3

Nie jestem ekspertem od JavaScript, ale może nie znajdę css wewnątrz funkcji. Więc musisz zadeklarować to przed funkcją?

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

Jest to bardzo miłe technika przełączania stylów z jQuery here. Można go łatwo połączyć z twoim randomizerem.

Answer 5

Nie, to działa.

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

w 1.css

 
* 
{ 
    color: Red; 
} 

w 2.css

 
* 
{ 
    border: solid 2px green ; 
} 

w 3.css

 
* 
{ 
    font-size: 40em; 
} 

w 4.css

 
* 
{ 
    border: solid 5px red ; 
} 

Answer 6

ile trzeba zrobić to po stronie klienta z jakiegoś powodu, zrób to na serwer.

Answer 7

Element Link musi być wewnątrz elementu head go do pracy, document.createElement /element.append

Answer 8

NIT-pick może, ale prawdopodobnie chcesz:

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

Answer 9

Jeśli CSS nie różnią się znacznie, można zrobić tak jak ja i mają CSS generowane losowo za każdym razem, gdy strona jest załadowany

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

wyjątkiem byłaby twoja oczywiście być dostosowane do własnej witryny.