सीएसएस जावास्क्रिप्ट प्रोग्रामर की मदद करने के लिए

जावास्क्रिप्ट का उपयोग करके, आप आसानी से एक HTML पृष्ठ में नोड्स की सभी विशेषताओं में हेरफेर कर सकते हैं। लेकिन, एक नियम के रूप में, जावास्क्रिप्ट का उपयोग करके "मैन्युअल रूप से" नोड्स की विशेषताओं को बदलना बहुत समय लेने वाला काम है, और HTML और CSS की जटिलताओं को जानने के लिए प्रोग्रामर की आवश्यकता होती है।

सीएसएस विशेषताएं आपको इस कार्य को लेआउट डिजाइनर में स्थानांतरित करने की अनुमति देती हैं, और प्रोग्रामर को केवल इन नोड्स के राज्यों में हेरफेर करना होगा। समस्या को हल करने के लिए यह दृष्टिकोण आपको अधिकांश "नुकसान" को बायपास करने की अनुमति देता है और बिना किसी विशेष कठिनाइयों के कई समस्याओं को हल करता है।



जावास्क्रिप्ट का उपयोग करके किसी पृष्ठ पर एक ब्लॉक को छिपाना / प्रदर्शित करना सबसे सरल उदाहरण है। यह आमतौर पर इस तरह किया जाता है:

 <Script>
 फ़ंक्शन छिपाने (नोडआईड)
 {
     var नोड = document.getElementById (नोडआईडी);
     यदि (नोड)
     {
         नोड.स्टाइल .isplay = 'कोई नहीं';
     } 
 }
 
 फ़ंक्शन शो (नोडआईडी)
 {
     var नोड = document.getElementById (नोडआईडी);
     यदि (नोड)
     {
         नोड.स्टाइल .isplay = 'ब्लॉक';
     } 
 }
 </ Script>
 <input type = "button" value = "Hide" onclick = "hide ('test')" />
 <input type = "button" value = "Show" onclick = "show ('test')" />
 <div id = "test"> एक उदाहरण के लिए पाठ।  उदाहरण के लिए पाठ। </ div>

आइए देखें क्या हुआ ।

यहाँ सब कुछ ठीक है, और इसके बारे में शिकायत करने के लिए कुछ भी नहीं है। एक और उदाहरण लें:

  <p> साबुन माँ <अवधि आईडी = "झूठ"> फ्रेम।  बेटा </ span> डैड </ p> से प्यार करता है
  <इनपुट प्रकार = "बटन" मूल्य = "संपूर्ण सत्य दिखाएं" />
  <input type = "button" value = "जैसा वह था वैसा ही लौटें" />

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

 <Script>
 फ़ंक्शन छिपाने (नोडआईड)
 {
     var नोड = document.getElementById (नोडआईडी);
     यदि (नोड)
     {
         नोड.स्टाइल .isplay = 'कोई नहीं';
     } 
 }

 फ़ंक्शन शो (नोडआईडी)
 {
     var नोड = document.getElementById (नोडआईडी);
     यदि (नोड)
     {
         नोड.स्टाइल .isplay = 'ब्लॉक';
     } 
 }
 </ Script>
 <p> साबुन माँ <अवधि आईडी = "झूठ"> फ्रेम।  बेटा </ span> डैड </ p> से प्यार करता है
 <input type = "button" value = "संपूर्ण सत्य दिखाएं" onclick = "hide ('lie')" />
 <input type = "button" value = "जैसा कि" onclick = "शो ('झूठ')" /> पर लौटें

हम कार्रवाई में काम के परिणाम की जांच करेंगे ।

जैसा कि आप उदाहरण से देख सकते हैं, बटन "संपूर्ण सत्य दिखाएं" अपना कार्य करता है जैसा वह चाहता है। लेकिन जब आप "रिटर्न के रूप में यह था" बटन पर क्लिक करते हैं, पाठ फिर से प्रकट होता है, लेकिन कुछ विकृतियों के साथ - पूरी तरह से अनावश्यक लाइन टूटता दिखाई देता है।

क्या कारण है? जो लोग थोड़ा सीएसएस जानते हैं वे लंबे समय से समझ रहे हैं कि मैं कहां जा रहा हूं। बात यह है कि यदि किसी भी नोड की प्रदर्शन संपत्ति को ब्लॉक करने के लिए सेट किया गया है, तो नोड एक ब्लॉक तत्व बन जाता है, जो डिफ़ॉल्ट रूप से 100% चौड़ाई पर कब्जा कर लेता है। हमारे मामले में, मान को इनलाइन सेट करना आवश्यक है, ब्लॉक नहीं। और एक प्रोग्रामर को ऐसी सूक्ष्मताओं को क्यों जानना चाहिए? इस मामले में, यह आवश्यक नहीं है।

आप दूसरे तरीके से जा सकते हैं - उदाहरण के लिए, मूल मान को मध्यवर्ती चर में जोड़कर छिपाने के फ़ंक्शन कोड को बदल दें। लेकिन एक बेहतर तरीका है।

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

 <Style>
 .hidden {प्रदर्शन: कोई नहीं ;;
 </ शैली>
 <Script>
 फ़ंक्शन छिपाने (नोडआईड)
 {
     var नोड = document.getElementById (नोडआईडी);
     यदि (नोड)
     {
         नोड .className = 'छिपा हुआ';
     } 
 }
 
 फ़ंक्शन शो (नोडआईडी)
 {
     var नोड = document.getElementById (नोडआईडी);
     यदि (नोड)
     {
         नोड .className = '';
     } 
 }
 </ Script>
 <p> साबुन माँ <अवधि आईडी = "झूठ"> फ्रेम।  बेटा </ span> डैड </ p> से प्यार करता है
 <input type = "button" value = "संपूर्ण सत्य दिखाएं" onclick = "hide ('lie')" />
 <input type = "button" value = "जैसा कि" onclick = "शो ('झूठ')" /> पर लौटें

अब उदाहरण के रूप में यह काम करना चाहिए।

हालांकि, एक और समस्या बनी हुई है - जिस मामले में नोड में पहले से ही कुछ वर्ग है, उस पर ध्यान नहीं दिया जाता है। इस समस्या को स्वयं हल करने का प्रयास करें।

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

मूल लेख