यादृच्छिक सीएसएस नियम

Question

मैं एक वेबसाइट पर काम कर रहा था, और मैंने सोचा कि यह कितना मजाकिया होगा अगर मैं पृष्ठ पर सीएसएस नियमों को मजाक के रूप में पूरी तरह यादृच्छिक बना देता। (न केवल तत्वों की शैलियों, बल्कि सीएसएस स्वयं नियमों का पालन करता है, क्योंकि वेबसाइट में बहुत गतिशील रूप से बनाए गए तत्व हैं।) प्रत्येक बार जब आप पृष्ठ लोड करते हैं तो परिणाम पूरी तरह से अलग होगा, और उनमें से अधिकतर भयानक लगेंगे। तो मेरे प्रश्न में दो भाग हैं:

जावास्क्रिप्ट/JQuery का उपयोग करके, आप प्रोग्रामिंग रूप से सभी सीएसएस नियमों की सूची कैसे प्राप्त करते हैं? चयनकर्ताओं के लिए जोड़े गए नियमों के साथ शब्दकोश के एक प्रकार के रूप में।

फिर, आप सूची को तोड़ने के बाद और प्रत्येक नियम को एक अलग चयनकर्ता को यादृच्छिक रूप से असाइन करने के बाद, आप अपने पिछले नियमों और विकल्प को कैसे हटा सकते हैं?

नोट: मेरा मतलब है, जावास्क्रिप्ट/JQuery का उपयोग करके, आप क्लाइंट पक्ष पर नियमों को यादृच्छिक कैसे करते हैं, केवल एक ही सीएसएस फ़ाइल नहीं।

Answer 1

आपको लगता है कि यह थोड़ा सा psuedo-ey है, यह भी ध्यान रखें कि आप शुद्ध जेएस का उपयोग करके ऐसा कर सकते हैं।

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

भी ध्यान दें कि सभी सीएसएस गुण ले 0 - 255 ताकि आप अपने एल्गोरिथ्म बनाने के लिए हो सकता है, लेकिन यह सुनिश्चित करें कि आप शुरू करा देंगे।

Answer 2

आप document.styleSheets के साथ सभी स्टाइलशीट तक पहुंच और पार कर सकते हैं। MDN

Answer 3

पर एपीआई दस्तावेज देखें पृष्ठ में सभी तत्वों के माध्यम से लूपिंग छोटा होगा (document.getElementsByTagName('*'))।

प्रत्येक तत्व के लिए उपलब्ध सभी शैलियों के माध्यम से लूपिंग तुच्छ (element.style) होगी।

किसी दिए गए शैली के लिए यादृच्छिक मूल्य निर्धारित करना कठिन होगा।

आपको शैलियों की हार्ड-कोडित सूचियां और उनमें से प्रत्येक के लिए संभावित मानों की आवश्यकता होगी, क्योंकि सेट किए जा सकने वाले मानों को इतनी जंगली रूप से बदलना होगा। कुछ विभिन्न इकाइयों (पीएक्स, एम,%) में हो सकते हैं। उनमें से कुछ को पूर्व-परिभाषित कीवर्ड संभावित मान के रूप में हैं।

और यदि आपके पास इसकी सीमा नहीं है तो एक यादृच्छिक मूल्य बिल्कुल अच्छा नहीं है। यादृच्छिक width सेट करना आसान लगता है, लेकिन आपको यह जानना होगा कि आप किस श्रेणी में काम करने जा रहे हैं। width:5743731px यादृच्छिक पृष्ठ के लिए भी बहुत उपयोगी नहीं होगा।

और फिर आपके पास ऐसे गुण हैं जो बाह्य संसाधन प्राप्त कर सकते हैं। एक सीएसएस पृष्ठभूमि छवि यादृच्छिक रूप से लगभग असंभव होने जा रही है, और फोंट को अलग @font-face घोषणा में लोड करने की आवश्यकता होगी, इसलिए आप केवल उन फ़ॉन्ट्स को यादृच्छिक करने में सक्षम होंगे जिन्हें आप जानते हैं।

और फिर आपको यह सोचना होगा कि आप कितने यादृच्छिक हैं। क्या आप हर तत्व पर हर संभव शैली को यादृच्छिक बनाने जा रहे हैं? (पागल, लेकिन हे, यह पूरी बात पागल है तो क्यों नहीं) या प्रति तत्व सिर्फ एक शैली है?

यह मत भूलना कि कई शैलियों एक दूसरे के साथ मिलकर काम करती हैं। तो text-overflow:ellipsis कुछ भी नहीं करता है जब तक कि आपके पास white-space:nowrap और overflow:hidden भी न हो। और border-color सेट करना व्यर्थ है जब तक कि आप अन्य सीमा विशेषताओं को भी सेट नहीं करते हैं।

तो हाँ, मुझे लगता है कि आपका पहला कार्य सीएसएस शैलियों की सूची में जाना होगा और काम करना होगा कि कौन से लोगों को यादृच्छिक बनाया जा सकता है और उनके लिए संभावित यादृच्छिक मूल्य क्या हो सकते हैं। यह मुश्किल है। एक बार जब आप इसे प्राप्त कर लेंगे, तो इसे अपने प्रोग्राम में हार्ड कोड दें, और शेष काफी सरल होना चाहिए।