Complete example of js implementation of article text size function_javascript skills

The example in this article describes the method of using js to realize the font size function of article text. Share it with everyone for your reference. The specific analysis is as follows:

Text large, medium and small is a function that many websites provide for users’ convenience in reading. The text large, medium and small font size function introduced in this article can be turned on after the user selects it. As long as another article is opened on the same website, the font size will be displayed according to the user's habits.

You must have seen the three buttons "Large", "Medium" and "Small" under the article title on some large websites, which are used to cater for different people's reading habits. Here I will introduce this method, and it supports automatic saving compared to theirs. You only need to select it once, and it will automatically adjust to your favorite font size next time you read it.

JS code part:

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

Copy code The code is as follows:

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);//.context is replaced by the container of your article content
};
$(document).ready(function(){
SetFont( $.cookie('Font_size') 'px' );
});

Replace the .context of the code with your article content container.

Html code part:

Then call the following code where needed:

Copy code The code is as follows:

Big
中
small

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

I hope this article will be helpful to everyone’s web programming based on JavaScript.