मैं जावास्क्रिप्ट के साथ एक तत्व वर्ग को कैसे बदल सकता हूं?


2776

मैं onclickजावास्क्रिप्ट का उपयोग करके किसी घटना के जवाब में HTML तत्व की एक श्रेणी कैसे बदल सकता हूं ?


28
"वर्ग विशेषता का उपयोग ज्यादातर शैली की शीट में एक वर्ग को इंगित करने के लिए किया जाता है। हालांकि, इसका उपयोग जावास्क्रिप्ट द्वारा भी किया जा सकता है (HTML DOM के माध्यम से) निर्दिष्ट वर्ग के साथ HTML तत्वों में परिवर्तन करने के लिए।" - w3schools.com/tags/att_standard_class.asp
ट्राइंको

11
element.setAttribute(name, value); बदलें nameके साथ classvalueआपने जो भी वर्ग दिया है, उसे उद्धरणों में संलग्न करके बदलें । यह वर्तमान वर्ग को हटाने और एक अलग जोड़ने की आवश्यकता से बचा जाता है। यह jsField उदाहरण पूर्ण कार्य कोड दिखाता है।
एलन वेल्स

3
<input type='button' onclick='addNewClass(this)' value='Create' />function addNewClass(elem){ elem.className="newClass";
OnClick के

@ ट्राइंको - जो कि w3schools पर लिंक बदल गया है, सितंबर 2012 में जैसा दिखता है। यहां 12 / Sep / 2012 से आर्काइव.ऑर्ग पर वह पृष्ठ है: HTML वर्ग विशेषता-w3schools । यहाँ w3schools.com पर प्रतिस्थापन पृष्ठ के लिए लिंक दिया गया है: HTML वर्ग विशेषता-w3schools
केविन फीगन

जवाबों:


3879

बदलती कक्षाओं के लिए आधुनिक एचटीएमएल 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);



105
महान उत्तर पीटर। एक सवाल ... जावास्क्रिप्ट के साथ JQuery के साथ क्यों करना बेहतर है? JQuery महान है, लेकिन अगर यह सब आपको करने की आवश्यकता है - तो जावास्क्रिप्ट की कुछ पंक्तियों के बजाय पूरे JQuery के लाइब्रे को शामिल करने का क्या औचित्य है?
मैटस्ट्यूहलर

23
@mattstuehler 1) वाक्यांश "बेहतर अभी तक x" का अर्थ अक्सर "बेहतर अभी तक (आप कर सकते हैं) x"। 2) मामले के दिल में जाने के लिए, jQuery को DOM को एक्सेस / मैनिपुलेट करने में सहायता करने के लिए डिज़ाइन किया गया है, और बहुत बार यदि आपको इस तरह की चीज़ को एक बार करने की आवश्यकता होती है, तो आपको इसे सभी जगह करना होगा।
बैरी

31
इस समाधान के साथ एक बग: जब आप कई बार अपने बटन पर क्लिक करते हैं, तो यह "MyClass" की कक्षा को कई बार तत्व में जोड़ देगा, बजाय यह देखने के लिए कि क्या यह पहले से मौजूद है। इस प्रकार आप एचटीएमएल क्लास की विशेषता को कुछ इस तरह से देख सकते हैं:class="button MyClass MyClass MyClass"
वेब_डिजाइनर सेप

35
यदि आप एक वर्ग 'myClass' को हटाने की कोशिश कर रहे हैं और आपके पास एक वर्ग 'उपसर्ग-myClass' है, तो आपने एक वर्ग को निकालने के लिए जो रीजेक्स दिया है, वह आपको आपके वर्गनाम में 'उपसर्ग-' के साथ छोड़ देगा: O
jinglestlestula

16
वाह, तीन साल और 183 तक और किसी ने भी अब तक नहीं देखा। धन्यवाद jinglesthula, मैंने regex को ठीक कर दिया है, इसलिए यह गलत तरीके से वर्ग नामों के हिस्सों को नहीं हटाएगा। // मुझे लगता है कि यह एक अच्छा उदाहरण है कि फ्रेमवर्क (जैसे jQuery) का उपयोग करने लायक क्यों है - इस तरह के कीड़े पकड़े जाते हैं और जल्द ही ठीक हो जाते हैं, और सामान्य कोड में बदलाव की आवश्यकता नहीं होती है।
पीटर बॉटन

422

आप भी कर सकते हैं:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

और एक वर्ग को टॉगल करें (यदि मौजूद है तो उसे हटा दें):

document.getElementById('id').classList.toggle('class');

63
मेरा मानना ​​है कि यह एचटीएमएल 5 पर निर्भर है।
जॉन

12
आपको एली ग्रे की classListशिम की आवश्यकता होगी ।
ELLIOTTCABLE

15
मोज़िला डेवलपर नेटवर्क कहता है कि यह काम नहीं करता है, मूल रूप से, इंटरनेट खोजकर्ताओं में 10. से कम है। मुझे मेरे परीक्षण में यह सच है। जाहिरा तौर पर, इंटरनेट एक्सप्लोरर 8-9 के लिए एली ग्रे शिम आवश्यक है। दुर्भाग्य से, मैं इसे अपनी साइट पर नहीं खोज सका (यहां तक ​​कि खोज के साथ)। शिमला मोज़िला लिंक पर उपलब्ध है।
डबलजे


4
atow "classList" को IE10 + में आंशिक समर्थन है; ओपेरा मिनी के लिए कोई समर्थन नहीं; शेष मानक ब्राउज़रों में पूर्ण समर्थन: caniuse.com/#search=classlist
Nick Humphrey

119

अपने पुराने प्रोजेक्ट्स में, जो jQuery का उपयोग नहीं करते थे, मैंने तत्व को वर्ग में जोड़ने, हटाने और जाँचने के लिए निम्नलिखित कार्य किए थे:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

इसलिए, उदाहरण के लिए, यदि मैं onclickबटन में कुछ वर्ग जोड़ना चाहता हूं तो मैं इसका उपयोग कर सकता हूं:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

अब तक निश्चित रूप से jQuery का उपयोग करना बेहतर होगा।


8
यह तब बहुत अच्छा होता है जब आपका ग्राहक आपको jQuery का उपयोग नहीं करने देता। (क्योंकि आप अपने पुस्तकालय का निर्माण लगभग समाप्त कर चुके हैं।)
माइक

1
@ माइक यदि क्लाइंट आपको jQuery का उपयोग नहीं करने देता है, तो क्या आप केवल अपनी लाइब्रेरी में आवश्यक सुविधाओं के माध्यम से नहीं जा सकते और पुनर्निर्माण कर सकते हैं?
kfrncs

5
@kfrncs क्योंकि मुझे आम तौर पर उस ढांचे की बड़ी जरूरत नहीं है। जिस प्रोजेक्ट के बारे में मैं सोच रहा था, उसके लिए केवल वही फ़ंक्शन थे जिनकी आवश्यकता थी 3 क्लासनाम (है, ऐड, रिमूव) फ़ंक्शंस और कुकी (है, ऐड, रिमूव) फ़ंक्शंस। बाकी सब कुछ या तो कस्टम था, या मूल रूप से अच्छी तरह से समर्थित था। तो सब कुछ एक साथ था तो टिप्पणी करने से पहले केवल 150 लाइनें थीं।
माइक

2
यार, इसके 4am और बहुत धन्यवाद। वेनिला जेएस जो हम अपने प्रोजेक्ट पर उपयोग कर रहे हैं और यह एक जीवन रक्षक था।
सबक्यूसर

इसके लिए यह मेरा पसंदीदा उपाय है। मैं हर जगह इसका इस्तेमाल करता हूं। मेरा मानना ​​है कि यह वर्गों को जोड़ने और हटाने का सबसे सुंदर तरीका है जब आपकी परियोजना में पहले से ही ऐसा करने का दूसरा तरीका नहीं है।
वेबवंडर

77

आप इस node.classNameतरह का उपयोग कर सकते हैं :

document.getElementById('foo').className = 'bar';

यह IE5.5 और PPK के अनुसार काम करना चाहिए ।


11
यह ऑब्जेक्ट पर किसी भी और सभी वर्गों को अधिलेखित कर देगा ... इसलिए यह इतना आसान नहीं है।
एरिक सेबस्टा

51

वाह, आश्चर्य की बात है कि यहाँ बहुत सारे उत्तर हैं ...

<div class="firstClass" onclick="this.className='secondClass'">

14
मैं कहूंगा कि विनीत जावास्क्रिप्ट उदाहरण कोड लिखने के लिए भयानक अभ्यास है ...
गेब

22
मैं असहमत होऊंगा, क्योंकि मुझे लगता है कि उदाहरण कोड को एक अच्छा उदाहरण सेट करना चाहिए।
थोमसट्रेटर

1
एक अच्छा उदाहरण एक ही समय में कल्पना को निर्देश और स्पार्क करना चाहिए। यह विचार को प्रतिस्थापित नहीं करना चाहिए, बल्कि इसे प्रेरित करना चाहिए।
एंथनी रटलेज

4
अन्य उत्तर ओवरकिल नहीं हैं, वे तत्व पर मौजूदा कक्षाएं भी रखते हैं।
gcampbell 15

47

शुद्ध जावास्क्रिप्ट कोड का उपयोग करना:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

33

यह मेरे लिए काम कर रहा है:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

बहुत बढ़िया जवाब! बस जोड़ने के लिए छोड़ दिया गया है: चयनकर्ता के लिए प्रत्येक सीएसएस वर्ग नाम के लिए सेट करें क्लास तत्वों के एक समूह के लिए एक शैली निर्दिष्ट करने के लिए
रोमन पोलेन।

यह मेरे लिए एफएफ पर काम करता है, लेकिन जब मैंने el.className = "newStyle" का उपयोग करने की कोशिश की है; यह काम नहीं किया, क्यों?
लुकाज़ 'सेवेरियन' ग्रीला जूल

1
आप उपयोग el.setAttribute('class', newClass)या बेहतर कर सकते हैं el.className = newClass। लेकिन नहीं el.setAttribute('className', newClass)
ओरोल

20

साथ ही आप HTMLElement ऑब्जेक्ट का विस्तार कर सकते हैं, ताकि वर्गों को जोड़ने, हटाने, टॉगल और चेक करने के तरीकों को जोड़ सकें ( gist ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

और फिर बस इस तरह का उपयोग करें (क्लिक करने पर कक्षा को जोड़ना या हटाना होगा):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

यहाँ डेमो है


1
यह एक छोटी सी
क्रिया

5
क्षमा करें @Jackson_Sandland लेकिन आप पूरी तरह से चूक गए हैं, जो कि jQuery का उपयोग नहीं करना है।
मोका

17

बस एक अन्य लोकप्रिय फ्रेमवर्क, Google क्लोजर से जानकारी जोड़ने के लिए, उनके डोम / वर्ग को देखें:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

तत्व का चयन करने के लिए एक विकल्प एक CSS3 चयनकर्ता के साथ goog.dom.query का उपयोग कर रहा है :

var myElement = goog.dom.query("#MyElement")[0];

14

पिछले नोटों पर कुछ छोटे नोट और ट्वीक्स:

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

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

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

13

ASP.NET में जावास्क्रिप्ट के साथ एक तत्व सीएसएस वर्ग बदलें :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

13

मैं jQuery का उपयोग करेगा और इस तरह से कुछ लिखूंगा:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

इस कोड को जब आईडी के एक तत्व के एक समारोह के नाम से जाना कहते हैं कुछ तत्व क्लिक किया जाता है। फ़ंक्शन ने क्लिक कियायदि यह पहले से ही इसका हिस्सा नहीं है, तो तत्व की वर्ग विशेषता पर करता है, और यदि यह है तो इसे हटा देता है।

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

धन्यवाद


8
आपको केवल jQueryएक बार इसके लंबे रूप में लिखना होगा । jQuery(function($) { });बनाता $उपलब्ध अंदर सभी मामलों में कार्य करते हैं।
ThiefMaster

10

रेखा

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

होना चाहिए:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

8
गलत। RegEx को आगे की स्लैश से विभाजित किया गया है। उद्धरण जोड़ने के कारण यह IE में विफल हो जाता है, जिस कक्षा को आप वास्तव में कक्षा को हटाने के बजाय हटाने की कोशिश कर रहे हैं।
डायलन

9

IE6 समर्थन के साथ वेनिला जावास्क्रिप्ट में एक तत्व वर्ग बदलें

आप attributesIE6 में भी पुराने ब्राउज़रों के साथ संगतता बनाए रखने के लिए नोड प्रॉपर्टी का उपयोग करने का प्रयास कर सकते हैं:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>


8

यहाँ मेरा संस्करण है, पूरी तरह से काम कर रहा है:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

उपयोग:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

4
foobarयदि आप कक्षा को हटाने की कोशिश करेंगे तो कक्षा टूट जाएगी foo। आंतरिक घटना हैंडलर विशेषताओं में जेएस को संपादित किए जाने से पहले तोड़ दिया गया था। 4 साल पुराना स्वीकृत उत्तर ज्यादा बेहतर है।
क्वेंटिन

1
धन्यवाद, मैंने इसे ठीक किया (उपसर्ग समस्या नहीं)। यह पुराना स्वीकार किया गया उत्तर है जिसमें regexp के साथ एक बग है।
अल्फ्रेड

कोड में अभी भी foobarसमस्या है। परीक्षा यहाँ
rosell.dk

8

एक तत्व पर टॉगल / क्लास जोड़ने / हटाने के लिए यहाँ एक टॉगलक्लास है:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

देख jsfiddle

गतिशील रूप से एक नया वर्ग बनाने के लिए यहां मेरा उत्तर भी देखें


6

मैं अपने कोड में निम्नलिखित वेनिला जावास्क्रिप्ट कार्यों का उपयोग करता हूं। वे नियमित अभिव्यक्तियों का उपयोग indexOfकरते हैं लेकिन नियमित अभिव्यक्तियों में विशेष वर्णों को उद्धृत करने की आवश्यकता नहीं होती है।

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

आप आधुनिक ब्राउज़रों में element.classList का भी उपयोग कर सकते हैं।


3

विकल्प।

यहाँ एक छोटी शैली बनाम क्लासिस्ट उदाहरण हैं जो आपको यह देखने के लिए मिलते हैं कि आपके पास क्या विकल्प उपलब्ध हैं और classListआप जो चाहते हैं उसे करने के लिए कैसे उपयोग करें।

style बनाम classList

के बीच का अंतर styleऔर classListउस के साथ है styleआप तत्व की शैली गुण में जोड़े जा रहे हैं, लेकिन classListथोड़े वर्ग तत्व की (ते) नियंत्रित कर रहा है ( add, remove, toggle, contain), मैं तुम्हें कैसे उपयोग करने के लिए दिखाई देगा addऔर removeउन के बाद से तरीका है लोकप्रिय हैं।


शैली का उदाहरण

यदि आप margin-topएक तत्व में संपत्ति जोड़ना चाहते हैं, तो आप इस तरह से करेंगे:

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

क्लासिस्ट उदाहरण

मान लें कि हमारे पास एक है <div class="class-a class-b">, इस मामले में, हमारे पास पहले से ही हमारे div तत्व में 2 कक्षाएं जोड़ी गई हैं, class-aऔर class-b, हम यह नियंत्रित करना चाहते हैं कि कौन सी कक्षाएं removeऔर किस वर्ग के लिए हैं add। यह कहाँ हैclassList काम हो जाता है।

हटाना class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

जोड़ना class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")


1

बस सोचा था कि मैं इसे फेंक दूंगा:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

1

सिर्फ इतना कहना myElement.classList="new-class"है जब तक आप अन्य मौजूदा वर्गों जिस स्थिति में आप उपयोग कर सकते हैं बनाए रखने की जरूरत classList.add, .removeतरीकों।

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}
<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>


1

ठीक है, मुझे लगता है कि इस मामले में आपको jQuery का उपयोग करना चाहिए या अपने तरीके को शुद्ध जावास्क्रिप्ट में लिखना चाहिए, मेरी प्राथमिकता मेरे आवेदन में सभी jQuery को इंजेक्ट करने के बजाय अपने स्वयं के तरीकों को जोड़ रही है अगर मुझे अन्य कारणों से इसकी आवश्यकता नहीं है।

मैं नीचे कुछ करना चाहता हूं जैसे कि मेरे जावास्क्रिप्ट फ्रेमवर्क में कुछ फंक्शनलिटीज जोड़ने के लिए जो कि jQuery के समान क्लास, डिलीटिंग क्लास आदि को हैंडल करते हैं, यह IE9 + में पूरी तरह से समर्थित है, मेरा कोड ES6 में भी लिखा गया है, इसलिए आपको इसकी आवश्यकता है यह सुनिश्चित करने के लिए कि आपका ब्राउज़र इसका समर्थन करता है या आप किसी चीज़ का उपयोग कर रहे हैं, अन्यथा आपको अपने कोड में ES5 सिंटैक्स का उपयोग करने की आवश्यकता है, इस तरह से भी, हम आईडी के माध्यम से तत्व खोजते हैं, जिसका अर्थ है कि तत्व को एक आईडी का चयन करने की आवश्यकता है:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

और आप बस उन्हें नीचे के रूप में उपयोग करने के लिए कॉल कर सकते हैं, कल्पना करें कि आपके तत्व में 'आईडी' की आईडी है और 'क्लास' की कक्षा है, सुनिश्चित करें कि आप उन्हें स्ट्रिंग के रूप में पास करते हैं, आप नीचे दिए गए उपयोग का उपयोग कर सकते हैं:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

1

classList DOM API:

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

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

हम लॉग में देख सकते हैं कि हमें न केवल तत्व के वर्गों के साथ एक वस्तु वापस मिल रही है, बल्कि कई सहायक विधियां और गुण भी हैं। यह ऑब्जेक्ट इंटरफ़ेस DOMTokenList से विरासत में मिला है , एक इंटरफ़ेस जो DOM में उपयोग किया जाता है, जो अंतरिक्ष के अलग-अलग टोकन (जैसे कक्षाएं) का एक सेट का प्रतिनिधित्व करता है।

उदाहरण:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}
button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}
<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  


1

हां ऐसा करने के कई तरीके हैं। ES6 सिंटैक्स में हम आसानी से प्राप्त कर सकते हैं। वर्ग जोड़ने और हटाने के लिए इस कोड का उपयोग करें।

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}
body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}
<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>


1
function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

कक्षा के साथ जोड़ने और हटाने के लिए यहां ऊपर दिए गए स्वीकृत उत्तर का उपयोग करना एक सरल क्रॉस-ब्राउज़र फ़ंक्शन है

वर्ग जोड़ें:

classed(document.getElementById("denis"), "active", true)

कक्षा निकालें:

classed(document.getElementById("denis"), "active", false)

1

बहुत सारे जवाब, बहुत सारे अच्छे जवाब।

टीएल; डीआर:

document.getElementById('id').className = 'class'

या

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

बस।

और, यदि आप वास्तव में क्यों जानना चाहते हैं और खुद को शिक्षित करना चाहते हैं, तो मैं पीटर बाउटन के उत्तर को पढ़ने का सुझाव देता हूं , यह बिल्कुल सही है।

नोट:
यह ( दस्तावेज़ या घटना ) के साथ संभव है :

  • getElementById()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()

1

वहाँ एक संपत्ति है className जावास्क्रिप्ट में एक HTML तत्व के वर्ग का नाम बदलने के लिए। मौजूदा वर्ग मान को नए के साथ बदल दिया जाएगा, जिसे आपने कक्षानाम में सौंपा है।

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

साभार - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html


1

ओपी सवाल था कि मैं जावास्क्रिप्ट के साथ एक तत्व वर्ग को कैसे बदल सकता हूं?

आधुनिक ब्राउज़र आपको जावास्क्रिप्ट की एक पंक्ति के साथ ऐसा करने की अनुमति देते हैं :

document.getElementById('id').classList.replace('span1','span2')

classListविशेषता एक DOMTokenList जो एक है प्रदान करता है तरीकों की विविधता । आप जोड़ () , निकालें () या प्रतिस्थापित () जैसे सरल जोड़तोड़ का उपयोग करके एक तत्व के क्लासिस्ट पर काम कर सकते हैं । या बहुत परिष्कृत हो और आप जैसे ऑब्जेक्ट्स या मैप को कुंजी () , मान () , प्रविष्टियाँ () के साथ जोड़ सकते हैं

पीटर बॉटन का जवाब एक शानदार है लेकिन यह अब एक दशक से अधिक पुराना है। सभी आधुनिक ब्राउज़र अब DOMTokenList का समर्थन करते हैं - https://caniuse.com/#search=classList और यहां तक ​​कि IE11 कुछ DOMTokenList तरीकों का समर्थन करते हैं


1

प्रयत्न

element.className='second'


-2

वर्किंग जावास्क्रिप्ट कोड:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

आप इस लिंक से एक कार्य कोड डाउनलोड कर सकते हैं ।


1
यह एक से अधिक वर्ग वाले तत्वों को तोड़ देगा।
15 अक्टूबर को gcampbell

-4

यहाँ ऐसा करने के लिए सरल jQuery कोड है।

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

यहाँ,

  • Class1 एक घटना के लिए एक श्रोता है।
  • पैरेंट क्लास वह क्लास है जिसे आप जिस क्लास को बदलना चाहते हैं उसे होस्ट करते हैं
  • Classtoremove आपके पास पुराना वर्ग है।
  • जोड़ने का वर्ग वह नया वर्ग है जिसे आप जोड़ना चाहते हैं।
  • 100 टाइमआउट देरी है जिसके दौरान कक्षा को बदल दिया जाता है।

शुभ लाभ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.