Question

我有一个快速的问题，关于样式表的随机化，JS或Jquery的最佳实践方法是什么。

我计划使用5至6个不同的stylesheet.css文档，仅处理颜色元素（背景，href，颜色）。我试图实现的目标是随机分配每次用户访问加载的样式表文件（例如，红色，绿色，黑色，白色）。

是否有用于此目的的JS库或已在使用的通用实践？

Answer 1

使用此

const stylesheets = ["main1.css","main2.css","main3.css","main4.css"];

let random = Math.floor(Math.random()*4);

document.head.appendChild('<link rel="stylesheet" href="' + stylesheets[random] + '">');

Answer 2

您可以尝试类似this

HTML

<body>
    <div width="100px" height="100px" class = "innerview">

    </div>
</body>

JQuery

$(document).ready(function() {
    const colors = ["red","yellow","green","blue"];

    var index = Math.floor(Math.random()*4);
    $("body").removeClass()
    $("body").addClass(colors[index])
})

CSS

.innerview {
    height: 100px;
    width: 100px;
}

.red .innerview {
    background-color: red;
}

.yellow .innerview {
    background-color: yellow;
}

.green .innerview {
    background-color: green;
}

.blue .innerview {
    background-color: blue;
}

对于这个简单的问题，加载不同的CSS将是一个过大的选择

每次页面访问随机分配stylesheet.css

2 个答案: