Randomize CSS Regeln

Question

Ich arbeitete auf einer Website, und ich dachte daran, wie lustig es wäre, wenn ich die CSS-Regeln auf der Seite als einen Witz vollständig randomisiert. (Nicht nur die Stile der Elemente, sondern auch die CSS-Regeln selbst, da die Website viele dynamisch erstellte Elemente enthält.) Jedes Mal, wenn Sie die Seite laden, wäre das Ergebnis völlig anders, und die meisten würden schrecklich aussehen. Also meine Frage hat zwei Teile:

Verwenden von JavaScript/JQuery, Wie erhalten Sie programmgesteuert eine Liste aller CSS-Regeln? Als eine Art Wörterbuch, in dem die Regeln mit den Selektoren gepaart sind.

Nachdem Sie die Liste aufgeteilt und jede Regel nach dem Zufallsprinzip einer anderen Auswahl zugewiesen haben, wie löscht man die vorherigen Regeln und ersetzt sie durch eigene?

HINWEIS: Ich meine, mit JavaScript/JQuery, wie Sie die Regeln auf der Clientseite randomisieren, nicht nur eine einzelne CSS-Datei.

Answer 1

Beachten Sie, dass dies ein bisschen pseudo-ey ist, auch, dass Sie dies mit reinem JS tun können.

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

beachten Sie auch, dass nicht alle CSS-Eigenschaften nehmen 0-255 so können Sie Ihren eigenen Algorithmus erstellen müssen, aber diese werden sicher erhalten Sie begonnen haben.

Answer 2

Sie können auf alle Stylesheets mit document.styleSheets zugreifen und diese durchlaufen. Siehe API-Dokumentation unter MDN

Answer 3

Das Durchlaufen aller Elemente auf der Seite wäre trivial (document.getElementsByTagName('*')).

Das Durchlaufen aller verfügbaren Stile für jedes Element wäre trivial (element.style).

Das Festlegen zufälliger Werte für einen bestimmten Stil wäre schwieriger.

Sie müssten hart codierte Listen von Stilen und möglichen Werten für jede von ihnen haben, weil die Werte, die eingestellt werden können, so wild variieren. Einige können in verschiedenen Einheiten (px, em,%) stehen. Einige von ihnen haben vordefinierte Schlüsselwörter als mögliche Werte.

Und ein zufälliger Wert ist überhaupt nicht gut, wenn Sie keine Grenzen haben. Eine zufällige Einstellung width klingt einfach, aber Sie müssen wissen, in welchen Bereichen Sie arbeiten werden. width:5743731px wird nicht einmal für eine randomisierte Seite sehr nützlich sein.

Und dann haben Sie die Eigenschaften, die externe Ressourcen abrufen können. Ein CSS-Hintergrundbild wird praktisch unmöglich zu randomisieren sein, und Schriften müssten in einer separaten @font-face Deklaration geladen werden, so dass Sie nur in der Lage sein würden, Schriften, die Sie wissen, geladen sind.

Und dann müssen Sie darüber nachdenken, wie randomisiert Sie sein werden. Werden Sie jeden möglichen Stil auf jedem Element randomisieren? (verrückt, aber hey, das Ganze ist verrückt, also warum nicht) Oder nur ein Stil pro Element?

Vergessen Sie nicht, dass viele Stile in Verbindung miteinander arbeiten. So text-overflow:ellipsis tut nichts, wenn Sie auch white-space:nowrap und overflow:hidden haben. Die Einstellung border-color ist sinnlos, wenn Sie nicht auch die anderen Rahmenattribute festgelegt haben.

Also ja, ich denke, Ihre erste Aufgabe wäre hier, die Liste der CSS-Stile durchzugehen und herauszufinden, welche davon randomisiert werden könnten und wie die möglichen Zufallswerte für sie aussehen könnten. Das ist das Schwierige. Sobald Sie das haben, schreiben Sie es in Ihr Programm, und der Rest sollte ziemlich einfach sein.