点击放大或缩小按钮改变文字的大小

2013-08-17 04:37:08 -0400

此代码仅供参考

代码说明

页面上有放大(+)和缩小(-)两个按钮，分别点击按钮，文字的大小将做相应的改变。

html代码

//document.onkeypress = getKey;
 //window.onload = initZoom;
 function GetCookie(name){
  if (document.cookie != "") {
   zoomc = document.cookie.split("; ");
   for (var i=0; i < zoomc.length; i++) {
                zoomv = zoomc[i].split("=");
                if (zoomv[0] == name) {
        return  unescape(zoomv[1]);
                }
   }
  }else{
   return "";
  }
 }
 function SetCookie(name,value){
  document.cookie = name + "=" + escape (value)+";";
 }
 /*function GoZoom(contentid){
  if(GetCookie("zoomVal") != null && GetCookie("zoomVal") != ""){
   document.all[contentid].style.zoom = GetCookie("zoomVal");
   currZoom=GetCookie("zoomVal");
  }
  else{
   document.all[contentid].style.zoom = '100%';
   currZoom = '100%';
  }
 }*/

function showCurrZoom(contentid) {
     document.all['showZoom'].innerText = document.all[contentid].style.zoom;
 }
 //-->
</SCRIPT>

<div id="zoom">
<div>
<div style="text-align:center;border:2px solid blue;background:#ddd" ><input type="button" value="+" onclick="zoomInOut('zoom','in')"/>          文字大小:<span id="showZoom"></span>          <input type="button" value="-" onclick="zoomInOut('zoom','out')"/></div><br/><div style="text-align:center"><br/>
<script type="text/javascript">initZoom("zoom");</script>
</div>
</div>
点击看下我变了没有哟！！ 
</div>

代码演示

文字大小:

点击看下我变了没有哟！！

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N