बदलती कक्षाओं के लिए आधुनिक एचटीएमएल 5 तकनीक
आधुनिक ब्राउज़रों ने classList को जोड़ा है जो एक पुस्तकालय की आवश्यकता के बिना कक्षाओं में हेरफेर करना आसान बनाने के लिए तरीके प्रदान करता है:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
दुर्भाग्य से, ये v10 से पहले इंटरनेट एक्सप्लोरर में काम नहीं करते हैं, हालांकि इस पृष्ठ से उपलब्ध IE8 और IE9 के लिए समर्थन जोड़ने के लिए एक शिम है । हालांकि, यह अधिक से अधिक हो रहा है समर्थित हो रहा है ।
सरल क्रॉस-ब्राउज़र समाधान
किसी तत्व का चयन करने के लिए मानक जावास्क्रिप्ट तरीका है document.getElementById("Id"), जो निम्नलिखित उदाहरणों का उपयोग करता है - आप निश्चित रूप से अन्य तरीकों से तत्व प्राप्त कर सकते हैं, और सही स्थिति में बस उपयोग कर सकते हैंthis इसके बजाय - हालांकि, इस पर विस्तार से जाना गुंजाइश से परे है जवाब का।
एक तत्व के लिए सभी वर्गों को बदलने के लिए:
सभी मौजूदा कक्षाओं को एक या अधिक नई कक्षाओं से बदलने के लिए, क्लासनाम विशेषता सेट करें:
document.getElementById("MyElement").className = "MyClass";
(आप कई कक्षाओं को लागू करने के लिए एक स्थान-सीमांकित सूची का उपयोग कर सकते हैं।)
एक तत्व में एक अतिरिक्त वर्ग जोड़ने के लिए:
मौजूदा मानों को हटाने / प्रभावित किए बिना किसी तत्व में एक वर्ग जोड़ने के लिए, एक स्थान और नए वर्गनाम को जोड़ दें, जैसे:
document.getElementById("MyElement").className += " MyClass";
एक तत्व से एक वर्ग निकालने के लिए:
किसी एकल वर्ग को एक तत्व से हटाने के लिए, अन्य संभावित वर्गों को प्रभावित किए बिना, एक साधारण रेगेक्स प्रतिस्थापित करना आवश्यक है:
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
इस रेगेक्स की एक व्याख्या इस प्रकार है:
(?:^|\s) # Match the start of the string, or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be end of string or a space)
gध्वज बताता है की आवश्यकता है, मामले में वर्ग के नाम जोड़ दिया गया है कई बार के रूप में दोहराने के लिए बदलें।
यह जाँचने के लिए कि क्या एक वर्ग पहले से ही किसी तत्व पर लागू है:
कक्षा को हटाने के लिए ऊपर उपयोग किए गए समान रेगेक्स का उपयोग चेक के रूप में भी किया जा सकता है कि क्या कोई विशेष वर्ग मौजूद है:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
इन कार्यों को ऑन्कलिक घटनाओं पर नियत करना:
जबकि HTML घटना विशेषताओं (जैसे कि) के अंदर सीधे जावास्क्रिप्ट लिखना संभव है onclick="this.className+=' MyClass'" ) के है, यह अनुशंसित व्यवहार नहीं है। विशेष रूप से बड़े अनुप्रयोगों पर, HTML मार्कअप को जावास्क्रिप्ट इंटरैक्शन लॉजिक से अलग करके अधिक प्राप्य कोड प्राप्त किया जाता है।
इसे प्राप्त करने के लिए पहला कदम एक फ़ंक्शन बना रहा है, और फ़ंक्शन को ऑनक्लिक विशेषता में कॉल कर रहा है, उदाहरण के लिए:
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(यह कोड स्क्रिप्ट टैग में होना आवश्यक नहीं है, यह केवल उदाहरण की संक्षिप्तता के लिए है, और जावास्क्रिप्ट सहित एक अलग फ़ाइल में अधिक उपयुक्त हो सकता है।)
दूसरा कदम HTML पर और जावास्क्रिप्ट में ईक्लिस्टिक ईवेंट को स्थानांतरित करना है, उदाहरण के लिए addEventListener का उपयोग करना
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
(ध्यान दें कि window.onload भाग की आवश्यकता है ताकि HTML के लोडिंग समाप्त होने के बाद उस फ़ंक्शन की सामग्री निष्पादित हो जाए - इसके बिना, जावास्क्रिप्ट कोड को कॉल करने पर MyElement मौजूद नहीं हो सकता है, ताकि लाइन विफल हो जाए।)
जावास्क्रिप्ट चौखटे और पुस्तकालय
उपरोक्त कोड सभी मानक जावास्क्रिप्ट में है, हालांकि सामान्य कार्यों को सरल बनाने के लिए एक फ्रेमवर्क या लाइब्रेरी का उपयोग करना आम बात है, साथ ही साथ फिक्स्ड बग्स और किनारे के मामलों से लाभ होता है जो आप अपने कोड को लिखते समय सोच भी नहीं सकते हैं।
जबकि कुछ लोग इसे केवल एक वर्ग को बदलने के लिए ~ 50 केबी फ्रेमवर्क को जोड़ने के लिए ओवरकिल मानते हैं, यदि आप जावास्क्रिप्ट काम का पर्याप्त मात्रा में कर रहे हैं, या कुछ भी जो असामान्य क्रॉस-ब्राउज़र व्यवहार हो सकता है, तो यह अच्छी तरह से विचार करने योग्य है।
(बहुत मोटे तौर पर, एक पुस्तकालय एक विशिष्ट कार्य के लिए डिज़ाइन किए गए उपकरणों का एक सेट है, जबकि एक रूपरेखा में आम तौर पर कई पुस्तकालय होते हैं और कर्तव्यों का एक पूरा सेट करता है।)
ऊपर दिए गए उदाहरणों को jQuery का उपयोग करते हुए नीचे पुन: प्रस्तुत किया गया है , शायद सबसे अधिक इस्तेमाल की जाने वाली जावास्क्रिप्ट लाइब्रेरी (हालांकि जांच के लायक अन्य भी हैं)।
(ध्यान दें कि $यहाँ jQuery ऑब्जेक्ट है।)
JQuery के साथ कक्षाएं बदलना:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
इसके अलावा, jQuery एक वर्ग जोड़ने के लिए एक शॉर्टकट प्रदान करता है यदि यह लागू नहीं होता है, या ऐसा करने वाला वर्ग हटा रहा है:
$('#MyElement').toggleClass('MyClass');
JQuery के साथ एक क्लिक समारोह के लिए एक समारोह निरुपित:
$('#MyElement').click(changeClass);
या, आईडी की आवश्यकता के बिना:
$(':button:contains(My Button)').click(changeClass);