随机化CSS规则

Question

我正在一个网站上工作，我想到如果我把页面上的CSS规则随机化为一个笑话会有多么有趣。 （不仅仅是元素的样式，而是CSS规则本身，因为网站有很多动态创建的元素。）每次加载页面时，结果都会完全不同，而且大多数都看起来很糟糕。所以我的问题有两个部分：

使用JavaScript / JQuery，您如何以编程方式获取所有CSS规则的列表？作为一种字典，规则与选择器配对。

然后，在您分解列表并将每个规则随机分配到不同的选择器后，如何删除以前的规则并替换为您自己的规则？

注意：我的意思是，使用JavaScript / JQuery，如何在客户端随机化规则，而不仅仅是单个CSS文件。

Answer 1

您可以使用document.styleSheets访问和遍历所有样式表。请参阅MDN

上的API文档

Answer 2

请注意，这有点伪装，还要注意你可以使用纯JS来做到这一点。

foreach (var e in document.getElementsByTagName("*")) {
  foreach (var p in el.style) {
    var r = Math.random(0, 255);
    e.style[p] = r;
  }
}

另请注意，并非所有css属性都需要0到255，因此您可能需要创建自己的算法，但这肯定会让您开始。

Answer 3

循环遍历页面中的所有元素将是微不足道的（document.getElementsByTagName('*')）。

循环遍历每个元素的所有可用样式将是微不足道的（element.style）。

为任何给定的样式设置随机值会更难。

您需要为每个样式设置硬编码的样式列表和可能的值，因为可以设置的值变化如此之大。有些可以是各种不同的单位（px，em，％）。其中一些将预定义的关键字作为可能的值。

如果你没有限制，随机值就没有任何好处。设置随机width听起来很容易，但您必须知道您将要使用的范围。即使对于随机页面，width:5743731px也不会非常有用。

然后您拥有可以获取外部资源的属性。 CSS背景图像几乎不可能随机化，并且字体需要在单独的@font-face声明中加载，因此您只能随机化您知道已加载的字体。

然后你必须考虑你将会是多么随机。你是否要在每个元素上随机化每种可能的风格？ （疯了，但是嘿，整件事情很疯狂，为什么不呢）或者每个元素只有一种风格？

不要忘记很多款式都是相互配合的。因此text-overflow:ellipsis除非您还有white-space:nowrap和overflow:hidden，否则无法执行任何操作。除非您还设置了其他边框属性，否则设置border-color毫无意义。

所以是的，我认为你在这里的第一个任务是浏览CSS样式列表，找出可以随机化的样式以及它们可能的随机值。这是困难的一点。一旦你有了它，硬编码到你的程序中，其余的应该相当简单。