जेएस

Question

के माध्यम से यादृच्छिक सीएसएस जेएस के माध्यम से यादृच्छिक सीएसएस शीट घुमाने की कोशिश कर रहा हूं - मेरे पास निम्न स्क्रिप्ट है लेकिन जब मैं इसका उपयोग कर रहा हूं - यह काम नहीं कर रहा है?

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

किसी भी मदद की सराहना करते हैं?

Answer 1

कोशिश प्रोग्राम के रूप में link तत्व बना सकते हैं और सिर के लिए यह जोड़कर करने के लिए:

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

जब आप स्टाइलशीट को "जोड़ते हैं" पृष्ठ पहले से ही प्रस्तुत किया जाता है। इस प्रकार का प्रतिस्थापन सर्वर पर सबसे अच्छा किया जाता है।

Answer 3

मैं जावास्क्रिप्ट विशेषज्ञ नहीं हूं, लेकिन शायद इसे css फ़ंक्शन के अंदर नहीं मिला है। तो आपको समारोह से पहले इसे घोषित करना होगा?

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

jQuery here साथ स्टाइलशीट स्विचन के लिए एक बहुत अच्छा तकनीक नहीं है। इसे आसानी से आपके randomizer के साथ जोड़ा जा सकता है।

Answer 5

नहीं, यह काम करता है।

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! 

1.css में

 
* 
{ 
    color: Red; 
} 

2.css में 3.css

 
* 
{ 
    font-size: 40em; 
} 

में

 
* 
{ 
    border: solid 2px green ; 
} 

4.css में

 
* 
{ 
    border: solid 5px red ; 
} 

Answer 6

जब तक आप यह किसी कारण के लिए ग्राहक के पक्ष क्या करना है, पर कर सर्वर।

Answer 7

लिंक तत्व यह काम करने के लिए सिर तत्व के अंदर होना चाहिए, document.createElement /element.append

Answer 8

एक निट की चुन सकते हैं जहाँ शायद, लेकिन आप शायद चाहते हैं:

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

Answer 9

अपने सीएसएस हैं काफी भिन्नता नहीं है, आप के रूप में मैंने किया करते हैं और सीएसएस बेतरतीब ढंग से हर बार पृष्ठ लोड होता है

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

सिवाय तुम्हारा स्पष्ट रूप से अपनी खुद की साइट के अनुरूप किया जाएगा उत्पन्न हो सकता था।