This article example describes how to implement the text size and font size function of JS. Share it for your reference. The specific analysis is as follows:
Large, medium and small text is a function that many websites can be convenient for users to read. The large, medium and small text font size function introduced in this example can be opened 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 three buttons under the title of articles on some large websites, "big", "medium" and "small" to take care of the reading habits of different people. Here I will introduce this method, and it supports automatic saving than theirs. Just select once and automatically adjust it to your favorite font size next time you read it.
JS Code Part:
First put the JS below into the JS file or script tag:
Copy the 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 Change to the container for your article content
};
$(document).ready(function(){
SetFont( $.cookie('Font_size') + 'px' );
});
Pay attention to changing the code .context to your article content container.
Html code section:
Then call the following code where needed:
Copy the code as follows: <a href="javascript:SetFont(16)">Large</a>
<a href="javascript:SetFont(14)">In</a>
<a href="javascript:SetFont(12)">Small</a>
You can customize the font size and text in the SetFont() function.
I hope that the description in this article will be helpful to everyone's web programming based on javascript.