JS to achieve the text size of the article font function complete example _javascript skills

This article describes the method of JS to achieve the text size font function of the article. Share to everyone for your reference. The specific analysis is as follows:

Text large and small is a lot of Web sites for users to read a convenient function, this article introduces the text of a large number of small and medium-sized features can be opened after the user to open as long as the same site to open another article will be based on user habits to display font size.

We must have seen the three buttons "big", "medium" and "small" under the title of the article in some large websites to take care of different people's reading habits. Here I would like to introduce this method, and more than their support automatically save Oh ~ Just select once, the next time to read automatically adjust to the favorite font size.

JS Code section:

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

Copy Code code 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 the container for your article
};
$ (document). Ready (function () {
SetFont ($.cookie (' font_size ') + ' px ');
});

Pay attention to replacing the. Context of your code with the content container of your article.

Html Code section:

Then invoke the following code where needed:

Copy Code code as follows:

<a href= "Javascript:setfont" > Big </a>
<a href= "Javascript:setfont" > </a>
<a href= "Javascript:setfont" > Small </a>

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

I hope this article will help you with your JavaScript based Web programming.