目前在使用的網頁本來就可以自選文字大小和佈景,不過只有佈景的部份是有用 cookie 來紀錄,文字大小的部份是沒有記憶的。因為這兩個功能我都是上網找現成的 javascript,本人其實是一點 javascript 也不會的。
所以儘管想把文字大小的部份也用 cookie 記憶起來,但一直就拖著沒有進行。這回總算趁這次改版稍微研究了一下土法煉鋼的寫法。之後新站的兩個功能都會是有記憶的了!
土法煉鋼的作法說穿了也沒有很困難。首先先寫原本沒有搞定的文字大小部份。先上網找了一段我看得懂寫法的 cookie 設定方式。(雖然原本模版的 cookie 我大概看得出是哪兩段,不過不知道為什麼想要照著使用一直失敗。)
接下來進行的事情大概是設定一個變數叫 fontsize,指定它等於 cookie fontsize 的值。然後指定文件字型大小等於 fontsize。然後,原本用得很好的佈景切換部份原樣保留,但去掉設定 cookie 的兩段(功能重複了),用這次寫的部份來讀取和新增 cookie。
所以首先從教學的網站拷貝了設定 cookie 和 讀取 cookie 動作的程式碼。然後接下來這樣寫:
function checkCookie() //定義一個動作叫 checkCookie
{
fontsize = getCookie(“fontsize”); //定義 fontsize 為讀取名為fontsize 的 cookie 所得到的值
if (fontsize!=null) //如果這個結果不是空的
{document.body.style.fontSize = fontsize + “em”;} //則把文件的字型大小定義為 fontsize em
else //否則
{
setfontsize(); //就跑 setfontsize 這個動作
}
var cookie = getCookie(“style”); //這三行是從原本佈景設定的地方挪過來,讀叫 style 的 cookie 來設定佈景。
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
然後,setfontsize 的部份,大致上和原來變更字體大小的程式碼相同,但是多指定一個變數叫作 fontsize,不直接改寫字型大小,而改變這個變數,然後在把字型大小與一個名叫 fontsize 的 cookie 設為這個 fontsize 變數。
function setfontsize(multiplier) {
if (document.body.style.fontSize == “”) {
document.body.style.fontSize = “1.0em”; //沒有的話,就先指定為 1em
}
var fontsize = parseFloat(document.body.style.fontSize) + (multiplier * 0.05)
document.body.style.fontSize = fontsize + “em”;
setfontcookie(“fontsize”,fontsize,365)
}