Установка размера шрифта с помощью Javascript не работает - PullRequest
Новая
       10

Установка размера шрифта с помощью Javascript не работает

0 голосов
/ 05 марта 2011

На MasterPage.Master я установил размер шрифта на моей веб-странице <<code>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 размер текста "мигает". Говоря о вспышках, я имею в виду, что сначала он отображается с размером по умолчанию (13 пикселей), а затем устанавливается в значение, установленное cookie-файлом ... что довольно раздражает

Так, не могли бы вы указать мне, что здесь не так?

Ответы [ 2 ]

1 голос
/ 05 марта 2011

Я бы рекомендовал совершенно другой подход:

Во-первых, в вашем CSS используйте em вместо px для установки размеров шрифта.

Затем на стороне сервера при ответе на запросы страницы проверьте cookie, затем установите размер шрифта для тега body, например <body style="font-size:10px">. Все, что вы измеряли с использованием единиц em, будет автоматически изменено в соответствии с размером, установленным на теле.

Вы также можете установить размер шрифта с помощью JavaScript в ответ на действия пользователя после загрузки страницы, но в противном случае было бы лучше установить его на стороне сервера.

0 голосов
/ 05 марта 2011

Делает ли он ту же вспышку, когда вы выбираете из меню, или только когда вы перезагрузите страницу?

Исходный код checkCookie выполняется для события onload, что означает, что страница загружается и обрабатывается до запуска скрипта, который изменяет шрифт. Это означает, что сначала будет установлен исходный размер шрифта, затем ваш скрипт запустится и изменит его. То, что вы можете захотеть сделать, это разместить ваш документ в div, который вы можете установить для отображения: нет. Затем, когда вы закончите изменять все размеры шрифта во время события onload, измените его на display: block. Таким образом, вы не увидите флэш, потому что содержимое страницы будет невидимым, пока ваш код вносит изменения.

...