Cara Menerapkan Gaya Font Sebagai Respons Terhadap Event

Jadi untuk artikel kali ini saya akan membuat dimana ketika saya mempunyai sebuah tombol yang sudah saya berikan value masing-masing gaya font dan ketika tombol itu di klik maka akan timbul sebuah gaya font sesuai dengan tombol yang kita pilih misal tombol miring yang kita tekan, maka paragraf yang ada di bawah pun akan ikut berubah, seperti itu, oke bagiamana Cara Menerapkan Gaya Font Sebagai Respons Terhadap Event, simak terus ya teman-teman.

gaya font yang akan saya berikan nanti hanya dua saya ko teman-teman, yaitu gaya font italic dengan font bold, walupun di css kita mudah menggunakannya tetapi kita akan sedikit bermain dengan jquerynya, jadi supaya lebih cantik saja ya teman-teman, jadi ketika d CSS kita biasanya font yang kta berikan itu langsung jadi ya, tetapi yang kita punya disini, dimana font itu yang tadinya normal ketika kita klik maka akan berubah sesuai dengan yang kita inginkan. cukup mudah ko teman-teman, untuk Cara Menerapkan Gaya Font Sebagai Respons Terhadap Event, seperti yang saya tulis di judulnya, kita menggunakan event click dan hover ya, dan ketika kita click itu lah proses itu akan terjadi, oke biar tambah mudah di mengerti teman-teman bisa lihat langsng di bawah ini:

<html>
  <head>
    <title>Cara Menerapkan Gaya Font Sebagai Respons Terhadap Event</title>
	<style type="text/css">
      .tombol{
        width: 80px;
        float: left;
        text-align: center;
        margin: 5px;
        border: 2px solid;
        font-weight: bold;
        padding: 5px;
      }
	   .hover{
        cursor: pointer;
        color: cyan ;
        background-color:green;
      }
      .terkait_tebal
      {
        font-weight: bold;
        text-align: justify;
      }
      .terkait_miring
      {
       font-style: italic;
       text-align: justify;
      }
      .container{
        width: 500px;
        margin: auto;
        border: 2px dotted #666;
        padding: 5px;
      }
      .clear{
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Cara Menerapkan Gaya Font Sebagai Respons Terhadap Event</h1>
      <span class="tombol" id="tombol_tebal">Tebal</span>
      <span class="tombol" id="tombol_miring">Miring</span>
      <span class="tombol" id="tombol_normal">Normal</span>
      <div class="clear"></div>
      <div id="paragraf">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br/>
      </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.tombol').hover(
          function(){
            $(this).addClass('hover');
          },
          function(){
            $(this).removeClass('hover');
          }
        );
        $('#tombol_tebal').bind('click', function(){
          $('#paragraf').removeClass('terkait_miring');
          $('#paragraf').addClass('terkait_tebal');
        });
        $('#tombol_miring').bind('click', function(){
          $('#paragraf').removeClass('terkait_tebal');
          $('#paragraf').addClass('terkait_miring');
        });
        $('#tombol_normal').bind('click', function(){
          $('#paragraf').removeClass('terkait_tebal');
          $('#paragraf').removeClass('terkait_miring');
        });
      });
    </script>
  </body>
</html>

cukup panjang ya, supaya teman-teman bisa lihat langsung hasilnya, teman-teman bisa copy saja file di atas lalu teman-teman coba, apakah berhasil, jika berhasil maka tampilannya akan seperti ini:

jika kita melihat di atas berarti saya mengklik tombol tebal ya, dan paragraf yang ada di bawah akan berubah semua dengan gaya font tebal seperti itu,oke saya rasa cukup sampai disini dulu belajar kita tentang Cara Menerapkan Gaya Font Sebagai Respons Terhadap Event, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.