Js text size font function complete example

This article illustrates the method of js to realize the function of text size and font size. Share with you for your reference. Specific analysis is as follows:

Text size is a convenient function for users to read many websites. The text size function introduced in this article can be opened after the user selects as long as another article is opened in the same website, the font size will be displayed according to the user's habits.

JS code part:

First, put the following JS into the JS file or the script tag:

jQuery.cookie = function(name, value, options) {

    if (typeof value != 'undefined') {

        options = options || {};

        if (value === null) {

            value = '';

            options.expires = -1;

        }

        var expires = '';

        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {

            var date;

            if (typeof options.expires == 'number') {

                date = new Date();

                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));

            } else {

                date = options.expires;

            }

            expires = '; expires=' + date.toUTCString();

        }

        var path = options.path ? '; path=' + options.path : '';

        var domain = options.domain ? '; domain=' + options.domain : '';

        var secure = options.secure ? '; secure' : '';

        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');

    } else {

        var cookieValue = null;

        if (document.cookie && document.cookie != '') {

            var cookies = document.cookie.split(';');

            for (var i = 0; i < cookies.length; i++) {

                var cookie = jQuery.trim(cookies[i]);

                if (cookie.substring(0, name.length + 1) == (name + '=')) {

                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

                    break;

                }

            }

        }

        return cookieValue;

    }

};

function SetFont(size){

    $.cookie('Font_size', size, { expires: 99999999 });

    $(".context").css("font-size",size);//Replace the context with a container for the content of your article 

};

$(document).ready(function(){

    SetFont( $.cookie('Font_size') + 'px' );

});

Note that the.context of the code is replaced by your article content container.

Html code section:

Then call the following code where needed:

<a href="javascript:SetFont(16)"> big </a>

<a href="javascript:SetFont(14)"> In the </a>

<a href="javascript:SetFont(12)"> small </a>

You can customize the font size and text in the SetFont() function.