本文實例講述了js實現文章文字大小字號功能的方法。分享給大家供大家參考。具體分析如下：
文字大中小是很多網站供用戶閱讀方便的一個功能，本文實例介紹的文字大中小字號功能可以在用戶選擇之后打開只要在同網站打開另一篇文章都會根據用戶習慣來顯示字體大小。
大家一定在某些大型網站看到過文章標題下三個按鈕 “大”、“中”、“小”，用來照顧不同人的閱讀習慣。這里我就要介紹這種方法，而且比它們的還支持自動保存哦~只要選擇一次，下次閱讀自動調整到喜歡的字號。
JS 代碼部分：
首先把下邊的 JS 放到 JS 文件或者 script 標簽里：
復制代碼代碼如下:
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 換成你文章內容的容器
};
$(document).ready(function(){
SetFont( $.cookie('Font_size') + 'px' );
});
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 換成你文章內容的容器
};
$(document).ready(function(){
SetFont( $.cookie('Font_size') + 'px' );
});
注意把代碼的 .context 換成你的文章內容容器。
Html 代碼部分：
然后在需要的地方調用下邊的代碼：
復制代碼代碼如下:
<a href="javascript:SetFont(16)">大</a>
<a href="javascript:SetFont(14)">中</a>
<a href="javascript:SetFont(12)">小</a>
<a href="javascript:SetFont(14)">中</a>
<a href="javascript:SetFont(12)">小</a>
可以自定義 SetFont() 函數里的字號以及文字。
希望本文所述對大家基于javascript的web程序設計有所幫助。
