Cara Mengubah Ukuran Font Dengan jQuery

Halo, ketemu lagi dengan saya, kali ini saya akan merancang panduan mengenai Cara Mengubah Ukuran Font Dengan jQuery, di pada sebuah blog terkadang banyak orang masih kesulitan bagi membaca sebuah konten, terutama untuk mereka yang mempunyai gangguan penglihatan, diantara cara supaya mereka dapat melihat konten dengan jelas ialah dengan memberikan ukuran font yang dapat dipilih.berikut ialah cara Mengubah Ukuran Font Dengan jQuery.

Pertama-tama-tama silahkan kalian bikin struktur HTML seperti berikut.

<div id=wrapper>
  <div id=controls>
    <a href=# id=small>A</a>
    <a href=# id=medium class=selected>A</a>
    <a href=# id=large>A</a>
  </div>
<h1>Header 1</h1>
  <h2>header 2</h2>
<p>Lorem ipsum </p>

</div>

Di bagian paragraf, silahkan kalian dapat isikan beberapa paragraf bebas, kemudian setelah itu, kita atur layout nya dengan kode CSS3 berikut ini supaya terlihat lebih rapi dan bagus.

*      {  margin:0; padding:0;
  font-family:Arial, Helvetica, sans-serif; text-decoration:none;}

body       {  background:#e7e7e7;}

#wrapper   {  width:400px;
              margin: 0 auto;
              padding:40px;
              background:#fff;
              box-shadow:0 0 50px 0 rgba(0,0,0,.25);}

#controls  {  float:right;
              padding:2px;
              width:25px;
              background:#333;
              position:fixed;
              margin:0 0 0 440px;
              text-align:center;
              transition:.25s ease-out;}

#controls a
           {  font-size:24px;
              color:#aaa;
              display:block;
              font-weight:bold;
              padding: 5px;}

#controls a:hover
           {  color:#fff;
              background:#000;
              transition:.25s ease-out;}

a.selected  {  background:#000;
               color:#fff !important;}

#small     {  font-size:10px !important;}
#medium    {  font-size:14px !important;}
#large     {  font-size:18px  !important;}

.small     {  font-size:75%;}

h1         {  font-size:36px;
              font-weight:bold;}

h2         {  font-size:24px;
              margin: 10px 0;}
 
p          {  font-size:14px;
              line-height:20px;}

Kalo telah, berikutnya kita bikin, kegunaan bagi mengubah ukuran font nya dengan kode JS berikut.

$(document).ready(function(){
  
  $(#small).click(function(event){
    event.preventDefault();
    $(h1).animate({font-size:24px});
    $(h2).animate({font-size:16px});
    $(p).animate({font-size:12px, line-height:16px});
    
  });
  
  $(#medium).click(function(event){
    event.preventDefault();
    $(h1).animate({font-size:36px});
    $(h2).animate({font-size:24px});
    $(p).animate({font-size:14px, line-height:20px});
    
  });
  
  $(#large).click(function(event){
    event.preventDefault();
    $(h1).animate({font-size:48px});
    $(h2).animate({font-size:30px});
    $(p).animate({font-size:16px, line-height:20px});
    
  });
  
  $( a ).click(function() {
   $(a).removeClass(selected);
  $(this).addClass(selected);
  
 });

});

Nah, kalo telah seluruh diketikan, simpan terlebih dahulu, kemudian silahkan buka di browser masing-masing dan lihat hasilnya.

Bagus, begitulah panduan mengenai Cara Mengubah Ukuran Font Dengan jQuery, semoga bermanfaat, amin.

Selamat mencoba 🙂

Sumber https://kursuswebsite.org