您的位置:首页 - 教程 - JavaScript - 正文
js动态改变字体大小实例
在很多大网站上为了提高用户方便阅读文字,都提供有字体大小选择功能,以适应不同年龄段人群的阅读需求,其实这种功能实现起来也很简单,修改起来也方便,字体大号由你来定,默认字体大小可以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(小型) ]

评论: