Tăng giảm kích thước font chữ bằng JQuery

Có thể một vài bạn sẽ nghĩ ngay rằng chức năng này không cần thiết nữa, nhất là khi chúng ta có thể phóng to thu nhỏ ngay trên trình duyệt. Tuy  nhiên cách đó sẽ phá hỏng những thiết kế của các bạn. Trong bài viết này, mình sẽ chỉ tập trung vào phần javascript, còn phần HTML và CSS chỉ là phần cơ bản.

1 HTML
Các bạn chỉ cần dùng khung chuẩn html như sau :

<a href="#" class="fontSizePlus">A+</a> |

<a href="#" class="fontReset">Reset</a> |

<a href="#" class="fontSizeMinus">A-</a>

2 CSS

Chúng ta chỉ cần định dạng màu chữ là okie.

a {

    color:#c00;

    text-decoration:none;

}

a:hover {

    color:#f00;

    text-decoration:underline;

}

3 Javascript

Cuối cùng là đoạn javascript giúp chúng ta tạo chức năng, mình có ghi chú thích từng câu lệnh, vì thế các bạn đọc sẽ dễ hiểu.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



<script type="text/javascript">

    $(document).ready(function () {

        // kích thước font chữ tối thiểu

        var min=9;

        //kích thước font chữ tối đa

        var max=16;



        // lấy font chữ mực định

        var reset = $('p').css('fontSize');



        //những phần tử sẽ thực hiện khi chức năng được gọi

        var elm = $('p.intro, p.ending');



        // ấn định kích thước font chữ mặc định và xóa bỏ px từ giá trị

        var size = str_replace(reset, 'px', '');



        //Tăng kích thước font chữ

    $('a.fontSizePlus').click(function() {



        // Nếu kích thước font chữ nhở hơn hoặc bằng với giá trị tối đa thì

        if (size<=max) {



            // tăng kích thước

            size++;



            // ấn định kích thước font cho phần tử

            elm.css({'fontSize' : size});

        }



        // hủy sự kiện click

        return false;



    });

        // Giảm kích thước font

    $('a.fontSizeMinus').click(function() {



        // nếu kích thước font chữ lớn hơn hay bằng với giá trị tối thiểu

        if (size>=min) {



            //giảm kích thước

            size--;



            // ấn định kích thước font cho phần tử

            elm.css({'fontSize' : size});

        }



        // hủy sự kiện click

        return false;



    });



    // khôi phục lại kích thước mặc định

    $('a.fontReset').click(function () {



        // ấn định kích thước font chữ mặc định

         elm.css({'fontSize' : reset});

    });



});



//hàm thay đổi chuỗi

function str_replace(haystack, needle, replacement) {

    var temp = haystack.split(needle);

    return temp.join(replacement);

}

</script>

Mình hy vọng với bài viết đơn giản này, các bạn sẽ có thêm kinh nghiệm cũng như kiến thức sử dụng jQuery, cũng như có thêm chức năng cho website hay blog của mình.