यह आलेख jQuery का उपयोग करके CSS को एक div से निकालने के विभिन्न तरीकों को प्रदर्शित करता है।
JQuery का उपयोग करके Div से CSS कैसे निकालें?
Div से CSS शैलियों को हटाने के लिए, jQuery की अंतर्निहित विशेषताओं का उपयोग करें। ऐसी दो विधियाँ हैं जिनके माध्यम से उपयोगकर्ता शैलियों, इनलाइन और कक्षाओं का उपयोग करके जोड़ या हटा सकते हैं।
विधि 1: एक डिव से इनलाइन सीएसएस हटाएं
HTML तत्व पर लागू होने वाली इनलाइन शैलियों को हटाने के लिए, “ रिमूवएटर () 'पद्धति का प्रयोग किया जाता है।
इसका उपयोग तब किया जाता है जब किसी तत्व की थोड़ी स्टाइलिंग की आवश्यकता होती है। इससे निपटने के लिए नीचे दिए गए चरणों का पालन करें:
चरण 1: एक संरचना बनाएँ
HTML फ़ाइल में, एक “बनाएँ <दिव> ” टैग करें और इसके अंदर कई HTML तत्व जोड़ें। उदाहरण के लिए, ' <एच1> ”, “ <एच2> ' और ' ” टैग नीचे दिए गए कोड में उपयोग किए जाते हैं:
< डिव >
< एच 1 > हैलो लिनक्सहिंट उपयोगकर्ता < / एच 1 >
< एच 2 > Linuxhint स्वर्ग का स्थान है < / एच 2 >
< पी > प्रोग्रामिंग भाषाओं से संबंधित प्रश्न। < / पी >
< / डिव >
< बटन > डिव के लिए स्टाइल रिमूवर < / बटन >
उपरोक्त कोड को क्रियान्वित करने के बाद, वेबपेज इस तरह दिखता है:
आउटपुट div और एक बटन की HTML संरचना दिखाता है।
चरण 2: इनलाइन स्टाइलिंग जोड़ें
Div ओपनिंग टैग के अंदर, 'का उपयोग करता है शैली ” तत्वों को प्रमुख और आकर्षक बनाने के लिए विशेषता और कुछ CSS गुण लागू करें:
रंग: गहरा मैजेंटा;
पृष्ठभूमि-रंग: मध्यम एक्वामरीन;
मार्जिन: 20 पीएक्स;
पैडिंग: 30 पीएक्स;' >
< एच 1 >नमस्कार Linuxhint उपयोगकर्ता< / एच 1 >
< एच 2 >Linuxhint स्वर्ग का स्थान है< / एच 2 >
< पी > प्रोग्रामिंग भाषाओं से संबंधित प्रश्न।< / पी >
< / डिव >
< बीआर >
< बटन > शैली निकालना के लिए डिव< / बटन >
उपरोक्त कोड का आउटपुट है:
आउटपुट पुष्टि करता है कि इनलाइन शैलियों को केवल div तत्व पर लागू किया जाता है।
चरण 3: इनलाइन CSS को हटाने के लिए jQuery का उपयोग करना
शैली विशेषताओं को हटाने के लिए, पैरेंट फ़ंक्शन तब कॉल करता है जब “ दस्तावेज़ ' है ' तैयार ”। नीचे दिए गए कोड में, आंतरिक फ़ंक्शन तब कॉल करता है जब उपयोगकर्ता 'क्लिक करता है' बटन ”। उसके बाद, यह फ़ंक्शन पृष्ठ पर रहने वाले सभी दिव्य तत्वों का चयन करता है और 'का उपयोग करता है' हटाएं। एटीआर () ' तरीका:
$ ( दस्तावेज़ ) ।तैयार ( समारोह ( ) {
$ ( 'बटन' ) .क्लिक करें ( समारोह ( ) {
$ ( 'डिव' ) .removeAttr ( 'शैली' ) ;
} ) ;
} ) ;
< / लिखी हुई कहानी >
JQuery कोड जोड़ने के बाद, वेबपेज इस तरह काम करता है:
उपरोक्त 'gif' दिखाता है कि div पर लागू शैलियों को बटन पर क्लिक करके हटा दिया जाता है।
विधि 2: क्लास CSS को एक Div से निकालें
HTML एलिमेंट को स्टाइल करने का दूसरा तरीका उन्हें एक 'निर्दिष्ट करना है' कक्षा ”। फिर, उस वर्ग के हिस्से में CSS को “के अंदर जोड़ें” <शैली> 'टैग या एक अलग में' सीएसएस फ़ाइल ”। JQuery का उपयोग करके इन शैलियों को भी हटाया जा सकता है। नीचे दिए गए चरणों का पालन करें:
चरण 1: कक्षा को दिव्य तत्व को असाइन करें
HTML फ़ाइल में, एक वर्ग विशेषता असाइन करें ' <दिव> ' तत्व। साथ ही, 'रिमूवर' की एक आईडी 'को' असाइन करें <बटन> ' उपनाम:
< एच 1 >नमस्कार Linuxhint उपयोगकर्ता< / एच 1 >
< एच 2 >Linuxhint स्वर्ग का स्थान है< / एच 2 >
< पी > प्रोग्रामिंग भाषाओं से संबंधित प्रश्न।< / पी >
< / डिव >
< बटन पहचान = 'निकालना' > शैली < को हटा दें / बटन >
अगला, 'पर जाएं <शैली> 'टैग करें और div वर्ग का नाम चुनें' स्टाइल ” और CSS गुण टाइप करें जो div तत्व पर लागू होते हैं:
< शैली >स्टाइल {
रंग : गोल्डनरोड;
पृष्ठभूमि- रंग : समुद्र हरा;
मार्जिन: 20 पीएक्स;
पैडिंग: 30 पीएक्स;
}
< / शैली >
उपरोक्त कोड को क्रियान्वित करने के बाद, वेबपेज इस तरह दिखता है:
आउटपुट प्रदर्शित करता है कि शैलियों को div तत्व पर लागू किया जाता है।
चरण 2: CSS स्टाइलिंग को हटाने के लिए jQuery जोड़ें
में ' <स्क्रिप्ट> ” टैग उपरोक्त विधि में बताए अनुसार jQuery कोड जोड़ें। जेक्वेरी ' रिमूव क्लास () 'विधि' को हटा देती है स्टाइल ” क्लास जिसे बटन क्लिक करने पर “div” एलिमेंट के साथ असाइन किया जाता है:
$ ( दस्तावेज़ ) ।तैयार ( समारोह ( ) {
$ ( 'बटन' ) .क्लिक करें ( समारोह ( ) {
$ ( 'डिव' ) .निकालें ( 'स्टाइलिंग' ) ;
} ) ;
} ) ;
< / लिखी हुई कहानी >
उपरोक्त कोड जोड़ने के बाद, वेबपेज इस तरह काम करता है:
उपरोक्त 'जीआईएफ' दिखाता है कि कक्षा में टाइप की गई शैलियों को बटन क्लिक के साथ हटा दिया जाता है।
निष्कर्ष
CSS को एक div से निकालने के लिए, “ हटाएं। एटीआर () ' और ' रिमूव क्लास () ” विधियों का उपयोग किया जा सकता है। ' हटाएं। एटीआर () 'को हटा देता है' शैली ” चयनित तत्व से विशेषता। दूसरी ओर, ' रिमूव क्लास () उस तत्व पर शैलियों को लागू करने के लिए उपयोग किए जा रहे चयनित तत्व वर्ग को हटा देता है। इस लेख ने सफलतापूर्वक प्रदर्शित किया है कि कैसे jQuery का उपयोग करके CSS को एक div से हटाया जाए।