Thay đổi font-size content với jQuery

Trong dự án WordPress Blog Themes sắp tới, mình dự định sẽ làm chức năng thay đổi kích thước font chữ cho nội dung bài viết. Nên hôm nay sẽ viết luôn một bài hướng dẫn để sau nay dễ dàng sử dụng lại cho các dự án tiếp theo.

Để sử dụng jQuery thay đổi kích thước font chữ nội dung bài viết khá đơn giản, bạn có thể sử dụng đoạn jQuery sau:

$(".selector").on("click", function() {
  $("html").css("font-size", "125%");
});

Tuy nhiên, sự thay đổi này chỉ có tác dụng với trang hiện tại. Khi người dùng click sang trang khác, mọi thứ lại trở về như ban đầu. Mình cần đến một giải pháp toàn diện hơn:

// change font size and set session storage variable
function changeFont(fontSize) {
  return function() {
    $("html").css("font-size", fontSize + "%");
    sessionStorage.setItem("fSize", fontSize);
  };
}

//check to see if session storage is set
if (sessionStorage.length !== 0) {
  $("html").css("font-size", sessionStorage.getItem("fSize") + "%");
}

Trên đây là một đoạn mã khá đơn giản để thực hiện thay đổi kích thước font chữ trong nội dung bài viết. Bạn có thể tham khảo đầy đủ đoạn code mình sử dụng ở dưới đây
HTML


FONT SIZE: A A A

Change the font size then refresh the page to see it stay the same

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto totam minus voluptates consectetur doloribus beatae, asperiores, eaque ipsa perspiciatis dolores voluptate esse magni quisquam dolorum maxime ab molestiae dolor dicta.

SCSS

html {
  font-size: 100%;
}

p {
  text-align: center;
  line-height: 1.5;
  padding: 0 20px;
}

span {
  cursor: pointer;
}

.js-font {
  //should probably set  the font-size to a px/rem/em instead of %
  &-decrease {
    font-size: 75%;
  }
  
  &-increase {
    font-size: 125%;
  }
}

jQuery

(function($) {
  function changeFont(fontSize) {
      return function() {
         $('html').css('font-size', fontSize + '%');
         sessionStorage.setItem('fSize', fontSize);
      }
    }

    var normalFont = changeFont(100),
            mediumFont = changeFont(115),
            largeFont  = changeFont(125);

    $('.js-font-decrease').on('click', function(){
      normalFont();
    });

    $('.js-font-normal').on('click', function(){
      mediumFont();
    });

    $('.js-font-increase').on('click', function(){
      largeFont();
    });

    if (sessionStorage.length !== 0) {
      $('html').css('font-size', sessionStorage.getItem('fSize') + '%');
    }
  
})(jQuery);

Chúc bạn thành công!

About the Author: admin

Leave a Reply

Your email address will not be published. Required fields are marked *