<html>
<head>
<title>字体大小设置js</title>
<style>
* {font-size:9pt;line-height:180%;}
#a div {width:50px;display:block;text-align:center;float:left;margin:auto 10px;border:1px solid #000;cursor:pointer;}
</style>
<script type="text/javascript">
var setFontStyle = {
DEF_Step:2,
DEF_Size:12,
DEF_MaxSize:32,
DEF_MinSize:8,
InitFont:function(){
var DEF_Size = this.DEF_Size;
var DEF_Step = this.DEF_Step;
var DEF_MaxSize = this.DEF_MaxSize;
var DEF_MinSize = this.DEF_MinSize;
document.getElementById("Txt_DEF").onclick = function(event){
var obj = document.getElementById("TxtContent");
obj.style.fontSize = DEF_Size;
return 0;
}
document.getElementById("Txt_BIG").onclick = function(event){
var obj = document.getElementById("TxtContent");
var curSize = parseInt(obj.style.fontSize);
if(isNaN(curSize)){curSize=DEF_Size;}
if(curSize > DEF_MaxSize){alert("字体已经够大了");}
else{curSize += DEF_Step;obj.style.fontSize = curSize;}
return 0;
}
document.getElementById("Txt_SMALL").onclick = function(event){
var obj = document.getElementById("TxtContent");
var curSize = parseInt(obj.style.fontSize);
if(isNaN(curSize)){curSize=DEF_Size;}
if(curSize < DEF_MinSize){alert("字体已经够小了");}
else{curSize -= DEF_Step;obj.style.fontSize = curSize;}
return 0;
}
}
}
</script>
</head>
<body>
<div id="a">
<div id="Txt_DEF">默认</div>
<div id="Txt_BIG">放大</div>
<div id="Txt_SMALL">变小</div>
</div>
<div style="width:188px;clear:both;margin:auto 20px;border:1px solid #F69;" id="TxtContent">
博客园首页(内容范围:.NET技术、Web技术、架构设计、项目管理、经验总结、业界评论)</div>
<script type="text/javascript">setFontStyle.InitFont();</script>
</body>
</html>
原创文章如转载，请注明出处：泡泡网络教程 [ http://www.hugo8.com ]
