Question

在MasterPage.Master我设置网页中的字体大小＆lt; body onload="checkCookie()">

<div id="menu">
       <ul>
            <li><a href="javascript:decFontSize();" class="minus"></a></li>
            <li><a href="javascript:defaultFontSize();" class="default"></a></li> 
            <li><a href="javascript:incFontSize();" class="plus"></a></li>
        </ul>
    </div>

这里是关联的Javascript

var min = 11;
var max = 18;

function checkCookie(){
var FontSize=getCookie('FontSize');
if (FontSize!=null && FontSize!="")
  {var p = document.getElementsByTagName('p');
      for (i = 0; i < p.length; i++) 
      {p[i].style.fontSize = FontSize + "px"}}
  else {
      {
          var p = document.getElementsByTagName('p');
          for (i = 0; i < p.length; i++)
          { p[i].style.fontSize = FontSize + "px" } 
      }
    setCookie('FontSize', 13, 365);
  }
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) c_end = document.cookie.length
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return ""
}

function setCookie(c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + exdate.toUTCString());
}

function defaultFontSize() {
        var p = document.getElementsByTagName('p');
        for (i = 0; i < p.length; i++)
        { p[i].style.fontSize = 13 + "px" }
        setCookie('FontSize', 13, 365);
}


function incFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 11;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
   setCookie('FontSize',s,365);
}
function decFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 11;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }  
    setCookie('FontSize',s,365);
}

以上代码的问题是每个post文本大小“闪烁”。通过说闪烁我的意思是它首先显示默认大小（13px），然后设置为cookie设置的值...这是非常烦人的

那么请你指出我这里有什么问题？

Answer 1

我建议采用完全不同的方法：

首先，在CSS中，使用em代替px来设置字体大小。

然后，在服务器端，在响应页面请求时，检查cookie，然后在body标签上设置字体大小，如<body style="font-size:10px">。使用em单位调整大小的所有内容都将相对于您在主体上设置的大小自动调整大小。

您还可以在页面加载后通过JavaScript设置字体大小以响应用户操作，但最好将其设置为服务器端。

Answer 2

当您从菜单中选择时，或者只是在重新加载页面时，它是否会生成相同的闪光灯？

原始的checkCookie代码在onload事件上运行，这意味着在运行更改字体的脚本之前，页面会加载并呈现。这意味着将首先设置原始字体大小，然后您的脚本将运行并更改它。您可能想要做的是将文档放在可以设置为显示的div中：none。然后，当您在onload事件期间修改所有字体大小时，将其更改为display：block。这样，您就不会看到闪存，因为当您的代码进行更改时，页面内容将不可见。

使用Javascript设置字体大小不起作用

2 个答案: