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

| | | | | | | | | | | | | | | | | | | | | | |

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

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

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

और ID चयनकर्ता

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

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

CSS चयनकर्ता

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

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

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

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

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

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

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

यह शैली

हमारे HTML दस्तावेज़ में betaBanner आईडी वाले तत्व पर लागू होती है। शैली तत्व की पृष्ठभूमि का रंग नारंगी और टेक्स्ट रंग को सफेद में सेट करेगी।

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

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

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

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

.orangeBackground {पृष्ठभूमि-रंग: नारंगी; }

यह शैली हमारे

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

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

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

अब तक हमने चर्चा की है कि आईडी, शैलियों को लागू कर सकते हैं एक एकल तत्व। उन वर्गों के विपरीत जो शैलियों को कई तत्वों पर लागू कर सकते हैं। केवल वर्ग और आईडी चयनकर्ताओं के बीच यही अंतर नहीं है।

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

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

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

इस कोड में, हमने टैग

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

https: // डोमेन .com/index.html#section3

जब कोई उपयोगकर्ता इस यूआरएल तक पहुंचता है, (जहां domain.com आपकी साइट का यूआरएल है), तो वे आईडी के साथ हेडर तक स्क्रॉल करेंगे। em>section3 । यह व्यवहार कक्षाओं को प्रभावित नहीं करता है।

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

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

दूसरी ओर, कक्षाएं वेब पेज पर कई तत्वों को प्रतिबिंबित कर सकती हैं। यदि आप रिप करने के लिए JavaSc में किसी विशेष तत्व के साथ काम करना चाहते हैं तो वे उपयोगी नहीं होंगे।

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

HTML में ऐसे कोई नियम नहीं हैं जो आपको किसी वर्ग के किसी तत्व को आईडी दोनों निर्दिष्ट करने से रोकते हैं।

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

टैग backgroundOrange के लिए शैलियों के अधीन होगा। इसके अतिरिक्त, यह पहचान चयनकर्ता का उपयोग करके आईडी customDiv पर लागू शैलियों का भी उपयोग करेगा।

निष्कर्ष

CSS के साथ काम करते समय, आपके लिए किसी क्लास में ID कार्ड का उपयोग करने का कोई विशेष कारण नहीं होता है। हालांकि, यदि आप एक वेब पेज तत्व की शैली चाहते हैं, और यदि आप कई तत्वों की शैली चाहते हैं तो इसका उपयोग करने के लिए आईडी का उपयोग करना एक अच्छा विचार है।

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