Javascript增加/减少字体大小（外部css）

Question

我设法整合了一个脚本，该脚本将使用按钮或链接增加网页部分的字体大小。它适用于 Moz/Chrome，但适用于 IE，理论上它在这些主要浏览器中不应该有问题。但我不知道是否可以使用 currentStyle 从由 getElementsByName 填充的变量中获取 fontSize；当然 IE 是在画空白。

这是我的脚本：

function changeFontSize(element,step)
{
    var styleProp = 'font-size';
    step = parseInt(step,10);

    var x = document.getElementsByName(element);

    for(i=0;i<x.length;i++) {

        if (x[i].currentStyle)  {
            var y = parseInt(x[i].currentStyle[styleProp],10);

        } else if (window.getComputedStyle) {           
            var y = parseInt(document.defaultView.getComputedStyle(x[i],null).getPropertyValue(styleProp),10);

        }

        x[i].style.fontSize = (y+step) + 'px';
    }
}

我用来汇总的 3 个网站是：

www.vijayjoshi.org

www.quirksmode.org

并且（这不是垃圾邮件，这实际上很重要）//http://www.white-hat-web-design.co.uk/blog/controlling-font-size-with-javascript/

谁能指出一个解决方案？提前致谢！

Answer 1

如何使用以下代码更新您的代码：

function changeFontSize(element,step)
{
 function computeFontSizeUpdate(oE)
 {
 //- init fSize with proper null value
 var fSize = null;
 //- retrieve fSize from style
 if (oE.currentStyle)  {
     fSize = parseInt(oE.currentStyle[styleProp], 10);
 } 
 else if (window.getComputedStyle) {
     var s = document.defaultView.getComputedStyle(oE,null);
     fSize = (s) ? parseInt(s.getPropertyValue(styleProp),10) : NaN;
 }

 //- check fSize value based on return of parseInt function
 if( isNaN(fSize) == false && fSize != null)
 {
    fSize += nStep + 'px';
    if(oE.currentStyle)
      oE.currentStyle.fontSize = fSize;
    else
      oE.style.fontSize = fSize;
 }
 };

 var styleProp = 'font-size';
 var nStep = parseInt(step, 10);

 //- ensure step value
 if( isNaN(nStep) ) nStep = 0;

 //- get target elements
 var oElems = document.getElementsByName(element);

 if ( oElems && oElems.length == 0)
 {
   var oE = document.getElementById(element);
   if(oE) computeFontSizeUpdate(oE);
 }
 else
 {
   for(oE in oElems) 
   {
    computeFontSizeUpdate(oE);
   }
 }

}

我已经更新了脚本，修复了一些变量，并没有更好地命名。

另外，我很抱歉，因为我现在在 Mac 上，我无法在 IE 中测试提供的脚本......但据我所知，它应该可以解决问题。

使用一些JS控制台可以直接在这个页面上直接执行

changeFontSize("nav-tags", 50);

你会注意到菜单栏中的标签元素会受到影响:)

希望对你有帮助