यह लेख CSS को JavaScript के साथ जोड़ने के तरीकों का वर्णन करेगा।
जावास्क्रिप्ट के साथ सीएसएस कैसे जोड़ें?
जावास्क्रिप्ट में, आप निम्न विधियों या दृष्टिकोणों का उपयोग करके इसकी शैली संपत्ति को संशोधित करके सीएसएस शैलियों को एक तत्व में जोड़ सकते हैं:
- शैली संपत्ति इनलाइन स्टाइल के रूप में
- setAttribute() विधि इनलाइन स्टाइल के रूप में
- createElement() वैश्विक स्टाइल के रूप में विधि
विधि 1: 'शैली' संपत्ति का उपयोग करके जावास्क्रिप्ट के साथ सीएसएस जोड़ें
जावास्क्रिप्ट में सीएसएस जोड़ने के लिए, 'का प्रयोग करें' शैली ' संपत्ति। इसका उपयोग किसी तत्व की इनलाइन शैलियों तक पहुँचने और हेरफेर करने के लिए किया जाता है। यह एक वस्तु देता है जो एक तत्व की इनलाइन शैलियों का प्रतिनिधित्व करता है और एक को व्यक्तिगत शैली के गुणों को प्राप्त करने या सेट करने की अनुमति देता है।
वाक्य - विन्यास
जावास्क्रिप्ट में सीएसएस शैली जोड़ने के लिए, निम्नलिखित सिंटैक्स का उपयोग “के लिए किया जाता है शैली ' संपत्ति:
तत्व। शैली ;
यहाँ, ' तत्व ” एक HTML तत्व का संदर्भ है।
उदाहरण
निम्नलिखित उदाहरण में, हम जावास्क्रिप्ट का उपयोग करके बटनों को स्टाइल देंगे। सबसे पहले, हम तीन बटन बनाएंगे और उन्हें आईडी असाइन करेंगे, जो स्टाइलिंग के लिए बटन तत्वों तक पहुंचने में मदद करता है:
< बटन आईडी = 'बीटीएन2' > अस्वीकार करना बटन >
< बटन आईडी = 'बीटीएन3' > स्वीकार करना बटन >
स्टाइल करने से पहले आउटपुट इस तरह दिखेगा:
अब, इन बटनों को “का उपयोग करके जावास्क्रिप्ट में स्टाइल करें” शैली ' संपत्ति। सबसे पहले, 'की मदद से सभी बटन तत्वों को उनके असाइन किए गए आईडी का उपयोग करके प्राप्त करें' getElementById () ' तरीका:
सहमत होने दो = दस्तावेज़। getElementById ( 'बीटीएन1' ) ;अस्वीकार करने दो = दस्तावेज़। getElementById ( 'बीटीएन2' ) ;
स्वीकार करते हैं = दस्तावेज़। getElementById ( 'बीटीएन3' ) ;
'का उपयोग करके इन सभी बटनों की पृष्ठभूमि का रंग सेट करें' शैली ' संपत्ति:
सहमत होना। शैली . पृष्ठभूमि का रंग = 'हरा' ;अस्वीकार करना। शैली . पृष्ठभूमि का रंग = 'लाल' ;
स्वीकार करना। शैली . पृष्ठभूमि का रंग = 'पीला' ;
जैसा कि आप देख सकते हैं, बटनों को “” का उपयोग करके सफलतापूर्वक स्टाइल किया गया है शैली ' संपत्ति:
विधि 2: 'सेटएट्रिब्यूट ()' विधि का उपयोग करके जावास्क्रिप्ट के साथ सीएसएस जोड़ें
जावास्क्रिप्ट में सीएसएस स्टाइल जोड़ने के लिए, 'का उपयोग करें' सेट एट्रिब्यूट () ' तरीका। इसका उपयोग HTML तत्व में एक विशेषता और उसके मान को सेट या जोड़ने के लिए किया जाता है।
वाक्य - विन्यास
निम्नलिखित सिंटैक्स का उपयोग 'के लिए किया जाता है सेट एट्रिब्यूट () ' तरीका:
उदाहरण
यहां, हम 'का उपयोग करके जावास्क्रिप्ट में बटनों पर विभिन्न शैलियों को सेट करेंगे' सेट एट्रिब्यूट () ' तरीका। सभी बटनों की सीमा त्रिज्या को 'पर सेट करें .5रेम ”, और “का पाठ रंग सहमत ' और ' अस्वीकार करना 'बटन से' सफ़ेद ”।
अस्वीकार करना। सेट एट्रिब्यूट ( 'शैली' , 'बैकग्राउंड-कलर: रेड; कलर: व्हाइट; बॉर्डर-रेडियस: .5rem;' ) ;
स्वीकार करना। सेट एट्रिब्यूट ( 'शैली' , 'पृष्ठभूमि-रंग: पीला; सीमा-त्रिज्या: .5rem;' ) ;
उत्पादन
विधि 3: 'CreateElement ()' विधि का उपयोग करके जावास्क्रिप्ट के साथ CSS जोड़ें
यदि आप सीएसएस शैली की तरह जावास्क्रिप्ट शैली में कक्षाएं या आईडी बनाना चाहते हैं, तो “का उपयोग करें। क्रिएट एलिमेंट () ' तरीका। इसका उपयोग गतिशील रूप से एक नया तत्व बनाने के लिए किया जाता है। स्टाइल बनाने के लिए एक ' शैली ” इस पद्धति का उपयोग करने वाला तत्व। ' createElement ('शैली') ” जावास्क्रिप्ट में विधि का उपयोग गतिशील रूप से एक नया शैली तत्व बनाने के लिए किया जाता है, जिसका उपयोग वेब पेज पर CSS शैलियों को जोड़ने के लिए किया जा सकता है।
वाक्य - विन्यास
दिए गए सिंटैक्स का प्रयोग “के लिए किया जाता है। क्रिएट एलिमेंट () ' तरीका:
जावास्क्रिप्ट में CSS स्टाइल जोड़ने के लिए, दिए गए सिंटैक्स का उपयोग करें:
कॉन्स्ट शैली = दस्तावेज़। createElement ( 'शैली' ) ;फिर नीचे दिए गए सिंटैक्स का उपयोग करके स्टाइल एलिमेंट को हेड टैग में जोड़ें:
दस्तावेज़। सिर . अपेंड चाइल्ड ( शैली ) ;यहाँ, ' शैली ' नव निर्मित शैली तत्व का एक संदर्भ है, और ' दस्तावेज़ सिर ” HTML दस्तावेज़ का प्रमुख तत्व है।
उदाहरण
सबसे पहले, “का उपयोग करके एक शैली तत्व बनाएँ क्रिएट एलिमेंट () ' तरीका:
अब, एक 'बनाएं btn 'सभी बटनों और आईडी पर समान स्टाइल लगाने के लिए क्लास' btn1 ”, “ btn2 ' और ' btn3 ” व्यक्तिगत बटन स्टाइल के लिए:
शैली। innerHTML = `. btn {
फ़ॉन्ट - आकार : 1.1रेम ;
गद्दी : 3 पीएक्स ;
अंतर : 2 पीएक्स ;
फ़ॉन्ट - परिवार : बिना - सेरिफ़ ;
सीमा - RADIUS : .5रेम ;
}
#बीटीएन1 {
पृष्ठभूमि - रंग : हरा ;
रंग : सफ़ेद ;
}
#बीटीएन2 {
पृष्ठभूमि - रंग : लाल ;
रंग : सफ़ेद ;
}
#btn3 {
पृष्ठभूमि - रंग : पीला ;
}
` ;
अब, शैली तत्व को एक पैरामीटर के रूप में पास करके दस्तावेज़ के शीर्ष पर जोड़ें ' अपेंड चाइल्ड() ' तरीका:
दस्तावेज़। सिर . अपेंड चाइल्ड ( शैली ) ; उत्पादन
यह सब जावास्क्रिप्ट में CSS जोड़ने के बारे में है।
निष्कर्ष
जावास्क्रिप्ट के साथ सीएसएस जोड़ने के लिए, इनलाइन स्टाइल का उपयोग करें जिसमें ' शैली 'संपत्ति, और' सेट एट्रिब्यूट () ' विधि, या ' का उपयोग करके वैश्विक स्टाइलिंग क्रिएट एलिमेंट () ' तरीका। वैश्विक स्टाइलिंग अधिक कुशल है जबकि इनलाइन पद्धति की अनुशंसा नहीं की जाती है क्योंकि इससे एप्लिकेशन की शैलियों को बनाए रखना मुश्किल हो जाता है और कोड पुनरावृत्ति हो सकती है। इस लेख में CSS को JavaScript के साथ जोड़ने के तरीकों का वर्णन किया गया है।