網站網頁上面添加字體大小控制的代碼實現方法

公元2015年08月04日沒人鳥我喲打醬油看熱鬧的有:1,112 views

網站網頁上面添加字體大小控制的代碼實現方法

們在做網站的時候會選擇一種自己認爲比較滿意的字體大小,但是當別人閱讀瀏覽的時候可能會因爲這個字體的或大或小感覺到不適,所以,爲了更好的用戶體驗,我們可以選擇爲文章添加一個字體大小的控制按鈕,可以有多種大小的字體供閱讀者切換,對提高閱讀,還是很有幫助的,下面我們就來說一下頁面添加大小控制按鈕的具體方法:

其實這種大小是靠JS控制的,比較小巧精緻,實現方法如下

首先,給需要改變字體大小的區域添加一個指向代碼,這個ID 你可以自己指定,不過要注意前後一致

1
<div id=zoom>

其次,掛上JS文件,必不可少的,因爲是通過這個控制轉換的

1
2
3
4
5
<SCRIPT language=JavaScript>
function doZoom(size){
document.getElementById('zoom').style.fontSize=size+'pt'
}
</SCRIPT>

最後,添加轉換按鈕到你需要的位置,也就是大小選擇按鈕的引入

1
2
3
4
5
<P align=right>選擇字號
<A href="javascript:doZoom(13)">超大</A> 
<A href="javascript:doZoom(11)">中型</A> 
<A href="javascript:doZoom(9)">标准</A> 
</p>

完成了,關於樣式的話,自己可以根據主題的需要酌情修改,生命不息,折騰不止!