Ngẫu nhiên các quy tắc CSS

Question

Tôi đang làm việc trên một trang web và tôi nghĩ về việc nó sẽ buồn cười thế nào nếu tôi hoàn toàn ngẫu nhiên các quy tắc CSS trên trang như một trò đùa. (Không chỉ là các yếu tố của các yếu tố, nhưng CSS tự quy định, bởi vì trang web có rất nhiều yếu tố được tạo động.) Mỗi ​​khi bạn tải trang kết quả sẽ hoàn toàn khác nhau và hầu hết trong số chúng sẽ trông khủng khiếp. Vì vậy, câu hỏi của tôi có hai phần:

Sử dụng JavaScript/JQuery, Làm thế nào để bạn lập trình có được danh sách tất cả các quy tắc CSS? Là một loại từ điển, với các quy tắc được ghép nối với các bộ chọn.

Sau đó, sau khi bạn đã chia nhỏ danh sách và gán ngẫu nhiên từng quy tắc cho một bộ chọn khác, bạn xóa các quy tắc trước đó và thay thế bằng cách nào?

LƯU Ý: Ý tôi là, sử dụng JavaScript/JQuery, làm cách nào để bạn ngẫu nhiên hóa các quy tắc ở phía máy khách, không chỉ là một tệp CSS duy nhất.

Answer 1

Hãy nhớ rằng đây là một chút psuedo-ey, cũng lưu ý rằng bạn có thể làm điều này bằng cách sử dụng JS thuần túy.

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

cũng lưu ý rằng không phải tất cả các thuộc tính css mất 0-255, do đó bạn có thể phải tạo ra thuật toán riêng của bạn, nhưng điều này sẽ chắc chắn giúp bạn bắt đầu.

Answer 2

Bạn có thể truy cập và duyệt tất cả các bảng định kiểu với document.styleSheets. Xem tài liệu API trên MDN

Answer 3

Lặp qua tất cả các yếu tố trong trang sẽ là tầm thường (document.getElementsByTagName('*')).

Lặp qua tất cả các kiểu có sẵn cho từng phần tử sẽ là tầm thường (element.style).

Đặt giá trị ngẫu nhiên cho bất kỳ kiểu nhất định nào sẽ khó hơn.

Bạn sẽ cần phải có danh sách kiểu mã hóa cứng và giá trị có thể có cho mỗi kiểu, bởi vì các giá trị có thể được đặt khác nhau rất lớn. Một số có thể ở nhiều đơn vị khác nhau (px, em,%). Một số trong số họ có các từ khóa được xác định trước là các giá trị có thể.

Và giá trị ngẫu nhiên không tốt chút nào nếu bạn không có giới hạn. Thiết lập ngẫu nhiên width có vẻ dễ dàng, nhưng bạn phải biết bạn sẽ làm việc với phạm vi nào. width:5743731px sẽ không hữu ích ngay cả đối với một trang ngẫu nhiên.

Và sau đó bạn có các thuộc tính có thể tìm nạp tài nguyên bên ngoài. Một hình nền CSS sẽ hầu như không thể ngẫu nhiên, và phông chữ sẽ cần phải được tải trong một tờ khai riêng biệt @font-face, vì vậy bạn chỉ có thể ngẫu nhiên các phông chữ mà bạn biết được tải.

Và sau đó bạn phải suy nghĩ về việc bạn sẽ ngẫu nhiên như thế nào. Bạn có định ngẫu nhiên mọi phong cách có thể có trên mọi phần tử không? (điên, nhưng này, toàn bộ điều này là điên rồ vậy tại sao không) Hoặc chỉ một phong cách cho mỗi yếu tố?

Đừng quên rằng rất nhiều kiểu làm việc cùng với nhau. Vì vậy, text-overflow:ellipsis không có gì trừ khi bạn cũng có white-space:nowrap và overflow:hidden. Và thiết lập một border-color là vô nghĩa trừ khi bạn cũng đã thiết lập các thuộc tính biên giới khác.Vì vậy, có, tôi nghĩ rằng nhiệm vụ đầu tiên của bạn ở đây sẽ là đi qua danh sách các kiểu CSS và tìm ra cái nào có thể được chọn ngẫu nhiên và những giá trị ngẫu nhiên có thể cho chúng có thể là gì. Đó là một chút khó khăn. Một khi bạn đã có điều đó, mã cứng nó vào chương trình của bạn, và phần còn lại nên khá đơn giản.