javascript - जावास्क्रिप्ट के साथ एक तत्व वर्ग बदलें




html dom (21)

जावास्क्रिप्ट का उपयोग कर onClick ईवेंट के जवाब में मैं HTML तत्व की कक्षा कैसे बदल सकता हूं?


Answers

मैं अपने कोड में निम्नलिखित वेनिला जावास्क्रिप्ट फ़ंक्शंस का उपयोग करता हूं। वे नियमित अभिव्यक्तियों और 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 भी उपयोग कर सकते हैं।


कक्षाओं को बदलने के लिए आधुनिक एचटीएमएल 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 से पहले इंटरनेट एक्सप्लोरर में काम नहीं करते हैं, हालांकि classList से उपलब्ध आईई 8 और shim के लिए समर्थन जोड़ने के लिए एक shim है। हालांकि, यह अधिक से अधिक supported

सरल क्रॉस ब्राउज़र समाधान

तत्व का चयन करने के लिए मानक जावास्क्रिप्ट तरीका document.getElementById("Id") का उपयोग कर रहा है, जो निम्न उदाहरणों का उपयोग करता है - आप निश्चित रूप से अन्य तरीकों से तत्व प्राप्त कर सकते हैं, और सही स्थिति में इसके बजाय इसका उपयोग कर सकते हैं - हालांकि, इस पर विस्तार से जवाब के दायरे से बाहर है।

तत्व के लिए सभी वर्गों को बदलने के लिए:

सभी मौजूदा वर्गों को एक या एक से अधिक नए वर्गों से प्रतिस्थापित करने के लिए, श्रेणी नाम विशेषता सेट करें:

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);



बस 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>


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

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

यहाँ,

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

शुभ लाभ।


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

पुराने ब्राउज़र के साथ संगतता रखने के लिए आप नोड attributes का उपयोग करने का प्रयास कर सकते हैं I6:

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>


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

<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>

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


कोई अपराध नहीं, लेकिन क्लास ऑन द फ्लाई को बदलने के लिए यह चालाक है क्योंकि यह पूरे वेब पेज की दृश्य प्रस्तुति को फिर से समझने के लिए सीएसएस दुभाषिया को मजबूर करता है।

कारण यह है कि सीएसएस दुभाषिया के लिए यह जानना लगभग असंभव है कि क्या कोई विरासत या कैस्केडिंग बदला जा सकता है, तो संक्षिप्त जवाब यह है:

क्लासनाम पर कभी भी उड़ान भरें कभी नहीं! -)

लेकिन आम तौर पर आपको केवल एक संपत्ति या दो को बदलने की आवश्यकता होगी, और इसे आसानी से लागू किया जाएगा:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}

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

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');
}

यहां demo


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

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

//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');

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

वाह, हैरान है कि यहां इतने सारे ओवरकिल उत्तर हैं ...

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

classList डीओएम एपीआई:

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

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

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

उदाहरण:

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>
  


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

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);
    }
}

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

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

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

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

धन्यवाद


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

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")' >

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

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

यह पीपीके के अनुसार आईई 5.5 और ऊपर काम करना चाहिए।


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

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

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

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

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(' ');
}

रेखा

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

होना चाहिए:

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

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

// 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 देखें

गतिशील रूप से एक नई कक्षा बनाने के लिए here मेरा उत्तर भी देखें


जब कोई .next () विधि लागू करता है तो एक ऑब्जेक्ट एक पुनरावर्तक बन जाता है

const james = {
name: 'James',
height: `5'10"`,
weight: 185,

[Symbol.iterator]() {
let properties = []
for (let key of Object.keys(james)){
     properties.push(key);
 }

index = 0;
return {
        next: () => {
            let key = properties[index];
            let value = this[key];
            let done = index >= properties.length - 1 ;
            index++;
            return { key, value, done };
        }
    };
  }

};


const iterator = james[Symbol.iterator]();

console.log(iterator.next().value); // 'James'
console.log(iterator.next().value); // `5'10`
console.log(iterator.next().value); // 185




javascript html dom