DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> js動態改變字體大小實例
js動態改變字體大小實例
編輯:JavaScript基礎知識      日期:2017/4/13 10:10:15
在很多大網站上為了提高用戶方便閱讀文字,都提供有字體大小選擇功能,以適應不同年齡段人群的閱讀需求,其實這種功能實現起來也很簡單,修改起來也方便,字體大號由你來定,默認字體大小可以CSS頁面中定義,下面是一個實例的代碼和效果。

代碼:
<html>
<head><title>js動態改變字體大小_何問起</title></head>
<body>
<div href="http://hovertree.com" id="fontHovertree" style="border:solid 1px black;">這是一段示例文字,你可以點擊下邊選擇不同字號的字體,這段文字會隨即改變大小。何問起。</div>
選擇字號:[ <A href="javascript:SizeHovertree(22)">22(大型)</A> <A href="javascript:SizeHovertree(16)">16(中型)</A> <A href="javascript:SizeHovertree(12)">12(小型)</A> ]
<script>
function SizeHovertree(size) {
document.getElementById('fontHovertree').style.fontSize = size + 'px'
}
</script>
</body>
</html>

效果:
這是一段示例文字,你可以點擊下邊選擇不同字號的字體,這段文字會隨即改變大小。何問起。 選擇字號:[ 22(大型) 16(中型) 12(小型) ]
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved