5

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

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

那么，在你分解列表并将每个规则随机分配给不同的选择器之后，你如何删除之前的规则并替换为你自己的？

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

4

3 回答 3

2

您可以访问和遍历所有样式表document.styleSheets。请参阅MDN上的 API 文档

于 2013-06-06T19:19:31.040 回答
1

请注意，这有点假，还请注意，您可以使用纯 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，因此您可能必须创建自己的算法，但这肯定会让您入门。

于 2013-06-06T19:10:15.133 回答
0

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

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

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

您需要有硬编码的样式列表和每种样式的可能值，因为可以设置的值变化很大。有些可以采用多种不同的单位（px、em、%）。其中一些具有预定义的关键字作为可能的值。

如果您没有限制，随机值根本没有用。设置随机width数听起来很容易，但你必须知道你要工作的范围。width:5743731px即使对于随机页面也不会很有用。

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

然后你必须考虑你将如何随机化。您是否要随机化每个元素上的所有可能样式？（疯狂，但是嘿，这整件事很疯狂，所以为什么不）或者每个元素只有一种样式？

不要忘记，许多风格是相互配合的。除非你text-overflow:ellipsis也有white-space:nowrapand ，否则什么也做不了overflow:hidden。border-color除非您还设置了其他边框属性，否则设置 a是没有意义的。

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

于 2013-06-06T19:53:05.960 回答