जावास्क्रिप्ट पर तत्वों की स्टाइलिंग
मान लीजिए कि हमारे पास कई पैराग्राफ हैं:
<p>text1</p>
<p>text2</p>
<p>text3</p>
आइए एक लूप के साथ इन पैराग्राफों को पार करें और प्रत्येक पैराग्राफ के अंत में
एक लिंक जोड़ें, जिस पर क्लिक करने पर
पैराग्राफ के टेक्स्ट में कुछ स्टाइलिंग जोड़ दी जाएगी।
उदाहरण के लिए, पैराग्राफ का टेक्स्ट क्रॉस-आउट हो जाएगा (यह CSS प्रॉपर्टी text-decoration करती है)।
आइए ऐसे कार्य की दो बारीकियों पर चर्चा करें।
सबसे पहले, जैसा कि पिछले पाठों में चर्चा की गई थी, सीधे जावास्क्रिप्ट के माध्यम से पैराग्राफ की शैलियों को बदलना उचित नहीं है - कुछ CSS क्लासेज को लागू करना बहुत अधिक सुविधाजनक होगा।
दूसरे, ऐसे कार्य को लागू करते समय आपका सामना कुछ आश्चर्य से होगा। इसके सार को समझने के लिए, आइए लिंक जोड़ने के बाद पैराग्राफ के HTML कोड को देखें:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
अब कल्पना करें कि लिंक पर क्लिक करने पर पैराग्राफ का टेक्स्ट क्रॉस-आउट हो जाएगा। हालाँकि, लिंक इस मामले में पैराग्राफ का हिस्सा भी है और इसे भी क्रॉस-आउट किया जाएगा! सबसे अधिक संभावना है कि ऐसा प्रभाव हमें नहीं चाहिए। हम चाहते हैं कि टेक्स्ट क्रॉस-आउट हो जाए, लेकिन लिंक - नहीं।
समस्या के समाधान के लिए बस टेक्स्ट को
span टैग में लपेटना होगा, इस तरह:
<p><span>text1</span><a href="">link</a></p>
<p><span>text2</span><a href="">link</a></p>
<p><span>text3</span><a href="">link</a></p>
निम्नलिखित HTML कोड दिया गया है:
<p>text1</p>
<p>text2</p>
<p>text3</p>
प्रत्येक पैराग्राफ के अंत में एक लिंक जोड़ें, जिस पर क्लिक करने पर पैराग्राफ का टेक्स्ट क्रॉस-आउट हो जाएगा (लेकिन लिंक - नहीं)।
पिछले कार्य को इस तरह संशोधित करें कि लिंक पर क्लिक करने के बाद यह लिंक पैराग्राफ से हटा दी जाए (और पैराग्राफ का टेक्स्ट क्रॉस-आउट हो जाए)।
कुछ HTML टेबल दी गई है। इस टेबल में एक लिंक के साथ एक और कॉलम जोड़ें। लिंक पर क्लिक करने पर उस लिंक वाली पंक्ति का बैकग्राउंड हरा हो जाना चाहिए।
पिछले कार्य को इस तरह संशोधित करें कि लिंक पर पहला क्लिक पंक्ति का बैकग्राउंड हरा कर दे, और दूसरा क्लिक इस क्रिया को रद्द कर दे।
