Javascript implements the article text size font function complete example _ javascript skills

This article describes how to implement the text size and font size function in Javascript. You can adjust the text size according to your habits. describes in detail the complete steps to implement this function. it is a very practical technique. If you need it, you can refer to the examples in this article to illustrate how to implement the text font size function in JavaScript. Share it with you for your reference. The specific analysis is as follows:

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

You must have seen three buttons "big", "medium", and "small" under the title of some large websites to take care of the reading habits of different people. Here I will introduce this method, and it also supports automatic saving ~ Once selected, the font size is automatically adjusted to the desired font size for the next reading.

JS Code:

First, place the following JavaScript code in the JS file or script Tag:

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 * 24x60*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. context with the container of your article content
};
$ (Document). ready (function (){
SetFont ($. cookie ('font _ size') + 'px ');
});

Note: Replace the. context of the Code with your article content container.

Html code:

Then, call the following code as needed:

The Code is as follows:

Large
Medium
Small

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

I hope this article will help you with javascript-based web programming.