1.9. addClass, removeClass, toggleClass

 



demo : https://www.lenlop123.com/2020/09/19-addclass-removeclass-toggleclass_21.html

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<style>
  .important {
    font-weight: bold;
    font-size: xx-large;
  }

  .blue {
    color: blue;
  }
</style>

<div id="div_1">This is div 1</div>
<div id="div_2">This is div 2</div>
<div id="div_3">This is div 3</div>
<div id="div_4">This is div 4</div>

<input id="but_addClass" type="button" value="addClass"><br>
<input id="but_removeClass" type="button" value="removeClass"><br>
<input id="but_toggleClass" type="button" value="toggleClass"><br>

<script>

  $(document).ready(function () {

    // addClass
    $("#but_addClass").click(function () {
      $("#div_1,#div_2").addClass("blue");
      $("#div_3").addClass("important");
      $("#div_4").addClass("important blue");
    });

    // removeClass
    $("#but_removeClass").click(function () {
      $("#div_4").removeClass("important");
    });

    // toggleClass
    $("#but_toggleClass").click(function () {
      $("#div_4").toggleClass("important");
    });

  });
</script>


Nhận xét