जावास्क्रिप्ट तत्व में शैली जोड़ें

Michael Zippo

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

CSS , वेब पेज पर किसी विशिष्ट तत्व या एकाधिक तत्वों को लक्षित करने के लिए चयनकर्ताओं का उपयोग किया जाता है। एक बार किसी तत्व को लक्षित करने के बाद, तत्व पर एक शैली या शैलियों का एक सेट लागू किया जा सकता है।

विभिन्न प्रकार के चयनकर्ता उपलब्ध हैं। सबसे अधिक उपयोग किए जाने वाले दो और ID हैं। दोनों का उपयोग शीर्षक वाले आइटम को लक्षित करने के लिए किया जाता है।

और ID चयनकर्ता

बीच में क्या अंतर है n <कोड> टैग> और <कोड> आईडी ? यह कई डेवलपर्स द्वारा पूछा गया एक प्रश्न है जो सीएसएस के लिए नए हैं और हम इस गाइड में जवाब देंगे।

जब तक आप इस गाइड को पढ़ना समाप्त कर लेंगे, तब तक आप इन दो चयनकर्ताओं के बीच के अंतरों को जान लेंगे। आपके पास अपने कोड में किस चयन का उपयोग करने के बारे में एक सूचित निर्णय लेने के लिए आवश्यक जानकारी होगी। आइए शुरू करें।

CSS चयनकर्ता

एक वेब पेज , आप पेज के विशिष्ट तत्वों पर कुछ शैलियों को लागू करना चाहते हैं। उदाहरण के लिए, आप सभी

टैग के टेक्स्ट रंग को हरे रंग में सेट कर सकते हैं या हेडर फ़ॉन्ट आकार बदल सकते हैं।

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

दो चयनकर्ता, और id , क्रमशः HTML तत्व को निर्दिष्ट वर्ग और आईडी के आधार पर शैली तत्वों के लिए उपयोग किया जाता है, लेकिन ये चयनकर्ता अक्सर भ्रमित होते हैं, इसलिए हम यह पता लगाएंगे कि प्रत्येक क्या करता है।

आईडी चयनकर्ता अद्वितीय है

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

आईडी चयनकर्ताओं को पाउंड चिह्न का उपयोग करके परिभाषित किया जाता है। उनके तुरंत बाद पहचान मूल्य का पालन किया जाता है जिसे आप स्टाइल नियमों का एक सेट लागू करना चाहते हैं। यहां कार्रवाई में पहचान चयनकर्ता का एक उदाहरण है:

यह शैली
हमारे HTML दस्तावेज़ में betaBanner आईडी वाले तत्व पर लागू होती है। शैली तत्व की पृष्ठभूमि का रंग नारंगी और टेक्स्ट रंग को सफेद में सेट करेगी।
वर्ग चयनकर्ता अद्वितीय नहीं है
एक वर्ग चयनकर्ता आपको शैली नियमों को परिभाषित करने की अनुमति देता है जो किसी पर भी लागू होते हैं तत्व एक निश्चित मान के बराबर वर्ग विशेषता के साथ।
जैसा कि ऊपर बताया गया है, पहचान चयनकर्ता का उपयोग किसी तत्व शैली के लिए नहीं किया जा सकता है। वास्तव में, वेब पेज पर केवल एक बार आईडी का उपयोग किया जा सकता है। दूसरी ओर, पाठ्यक्रम का उपयोग कई तत्वों पर किया जा सकता है। इसलिए यदि आप किसी वर्ग चयनकर्ता का उपयोग करके कोई शैली लागू करते हैं, तो उस वर्ग को साझा करने वाला कोई भी तत्व आपके द्वारा परिभाषित शैलियों के अधीन होगा।
कक्षा चयनकर्ताओं को एक अवधि का उपयोग करके परिभाषित किया जाता है, उसके बाद उस वर्ग का मान जिसमें आप शैलियों का एक सेट लागू करना चाहते हैं। कार्रवाई में वर्ग चयनकर्ता का एक उदाहरण यहां दिया गया है:
। .orangeBackground {पृष्ठभूमि-रंग: नारंगी; }

यह शैली हमारे
टैग की पृष्ठभूमि का रंग नारंगी पर सेट करती है। साथ ही, शैली हमारे नारंगी टैग पर बड़ा नामक एक वर्ग लागू करना चाहते हैं, तो हम इसे इस कोड का उपयोग करके कर सकते हैं:

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

इस कोड में, हमने टैग
टैग को एक पहचान पत्र सौंपा है जिसमें टेक्स्ट तीन है। अब हम उपयोगकर्ता को वेब पेज पर उस तत्व के लिए एक सीधा स्क्रॉलिंग लिंक भेज सकते हैं। यह निम्न पते का उपयोग करके किया जाता है:

जावास्क्रिप्ट तत्व में शैली जोड़ें

और ID चयनकर्ता

CSS चयनकर्ता

आईडी चयनकर्ता अद्वितीय है

वर्ग चयनकर्ता अद्वितीय नहीं है

आईडी का एक अद्वितीय ब्राउज़र फ़ंक्शन होता है

आईडी का उपयोग किया जाता है जावास्क्रिप्ट द्वारा

आप दोनों क्लास का उपयोग कर सकते हैं चयनकर्ता आईडी और सीएसएस

निष्कर्ष