用户登录  |  用户注册
首 页源码下载网络学院最新源码源码排行屏蔽广告
当前位置:新兴网络 > 网络学院 > 网页制作 > JavaScript

JS 控制网页字体放大缩小实例

减小字体 增大字体 作者:佚名  来源:本站整理  发布时间:2010-08-19 11:30:57
HTML code运行代码复制代码编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS 控制网页字体放大缩小实例</title>
</head>
<body>
<script type="text/javascript">
var initial_fontsize    = 10;
var initial_lineheight  = 18;
function setFontsize(type,objname){
    var whichEl = document.getElementById(objname);
    if (whichEl!=null) {
        if (type==1){
            if(initial_fontsize<64){
                whichEl.style.fontSize=(++initial_fontsize)+'pt';
                whichEl.style.lineHeight=(++initial_lineheight)+'pt';
            }
        }else {
            if(initial_fontsize>8){
                whichEl.style.fontSize=(--initial_fontsize)+'pt';
                whichEl.style.lineHeight=(--initial_lineheight)+'pt';
            }
        }
    }
}
</SCRIPT>

<input onclick="setFontsize(0,'Content')"  type="button" value="缩小字体">
<input onclick="setFontsize(1,'Content')"  type="button" value="放大字体">

<DIV ID="Content">
   新兴网络 - http://www.newxing.com/
</DIV>
</body>
</html>

Tags:控制字体 放大缩小 网页 JS

作者:佚名
  • 好的评价 如果您觉得此文章好,就请您
      100%(2)
  • 差的评价 如果您觉得此文章差,就请您
      0%(0)

网络学院评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论