javascript - 简化字体大小切换

Question

这是我在这里的第一篇文章。我认为

我希望这个脚本只在两种尺寸之间切换。

<script type="text/javascript">
var min=10;
var max=18;
function increaseFontSize() {

   var p = document.getElementsByTagName('td');
   for(i=0;i<p.length;i++) {

      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {

         var s = 10;
      }
      if(s!=max) {

         s += 1;
      }
      p[i].style.fontSize = s+"px"

   }
}

function decreaseFontSize() {

   var p = document.getElementsByTagName('td');
   for(i=0;i<p.length;i++) {

      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {

         var s = 10;
      }
      if(s!=min) {

         s -= 1;
      }
      p[i].style.fontSize = s+"px"

   }
}
</script>

因此，如果有人可以删除我不需要的 80% 的脚本，我会非常高兴。（不，真的，我就是那个菜鸟。）

提前致谢。

Answer 1

你可以使用 jQuery 和一些 CSS 类很容易地做到这一点，如下所示：

http://jsfiddle.net/redders6600/e3FGs/

Javascript：

$('#small').click(function(){
  $('td').removeClass('big').addClass('small');
});

$('#large').click(function(){
  $('td').removeClass('small').addClass('big');
});

CSS：

td.small{
  font-size:10px;
}
td.big{
  font-size:18px;
}

Answer 2

可能你需要这个

演示

<script type="text/javascript">
var min=10;
var max=18;
function togalFontSize() {

   var p = document.getElementsByTagName('td');
   for(i=0;i<p.length;i++) {

      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
         if(s==max) {
              s = min;
          }else{
             s =  max;
          }
      } else {

         var s = 10;
      }

      p[i].style.fontSize = s+"px"

   }
}

</script>

或者如果你想要 2 个功能（可能因为你有 2 个按钮可以在它们之间切换..） DEMO 2

<script type="text/javascript">
var min=10;
var max=18;
function increaseFontSize() {

   var p = document.getElementsByTagName('td');
   for(i=0;i<p.length;i++) {

       p[i].style.fontSize = max+"px"

   }
}

function decreaseFontSize() {

   var p = document.getElementsByTagName('td');
   for(i=0;i<p.length;i++) {
      p[i].style.fontSize = min+"px"

   }
}
</script>