Question

我试图通过JS旋转随机CSS表 - 我有以下脚本但是当我使用它时 - 它似乎没有用？

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

我不是JavaScript专家，但可能在函数中找不到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切换样式表有一种非常好的技巧。它可以很容易地与随机发生器结合使用。

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

in 2.css

*
{
  border: solid 2px green ;
}

in 3.css

*
{
  font-size: 40em;
}

在4.css

中

*
{
  border: solid 5px red ;
}

Answer 6

除非您出于某种原因必须在客户端执行此操作，否则请在服务器上执行此操作。

Answer 7

link元素必须位于head元素内才能使其工作，document.createElement /element.append

Answer 8

也许是挑选，但你可能想要：

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

Answer 9

如果您的CSS变化不大，您可以按照我的方式进行操作，并在每次加载页面时随机生成CSS

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

除了你的，显然会根据你自己的网站量身定制。

通过JS随机CSS

9 个答案: