JSFiddle - React, Tailwind, and code Playground

by Dineshkani

HTML

<div id="firstdiv" class="sample">Hello Jquery</div><br/><br/>
<div id="secondiv" class="sample">Hello Javascript</div><br/><br/>

<input type="button" value="addClassJquery" />
<input type="button" value="removeClassJquery" />
<input type="button" value="toggleClassJquery" /><br/><br/>

<input type="button" value="addClassJS" id="adds"/>
<input type="button" value="removeClassJS" id="removes"/>
<input type="button" value="toggleClassJS" id="toggles"/>

CSS

.fontblue{
       color: blue;
        font-size: 30px;
}

JavaScript

//In Jquery

$("input[value='addClassJquery']").on("click",function(){
        $("#firstdiv").addClass('fontblue');
});
$("input[value='removeClassJquery']").on("click",function(){
        $("#firstdiv").removeClass('fontblue');
});
$("input[value='toggleClassJquery']").on("click",function(){
        $("#firstdiv").toggleClass('fontblue');
});


//In Javascript

document.getElementById("adds").onclick = function(){
    var dk = document.getElementById("secondiv");
    dk.className += " fontblue";
}
document.getElementById("removes").onclick = function(){
    var dk = document.getElementById("secondiv");
    dk.className = dk.className.replace("fontblue","");
}
document.getElementById("toggles").onclick = function(){
    var dk = document.getElementById("secondiv");
    if (dk.className.indexOf('fontblue') != -1){
        dk.className = dk.className.replace("fontblue","");
    }
    else {
        dk.className +=" fontblue";
    }
}


//Now you have a clear idea which one is best to use.