Javascript для увеличения / уменьшения размера шрифта (внешний CSS) - PullRequest
Новая
       3

Javascript для увеличения / уменьшения размера шрифта (внешний CSS)

1 голос
/ 04 августа 2011

Мне удалось собрать скрипт, который будет увеличивать размеры шрифта частей веб-страницы с помощью кнопок или ссылок.Он работает в Moz / Chrome, но придерживается IE, хотя теоретически у него не должно быть проблем в этих основных браузерах.Но я застрял на том, возможно ли использовать currentStyle для получения fontSize из переменной, заполненной getElementsByName;Конечно, 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 сайта, которые я использовал для этого:.org

www.quirksmode.org

и (это не спам, это действительно важно) // http://www.white -hat-web-design.co.uk/blog/controlling-font-size-with-javascript/

Может кто-нибудь указать решение, пожалуйста?Заранее спасибо!

1 Ответ

1 голос
/ 04 августа 2011

как насчет обновления вашего кода следующим образом: 

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);

и вы заметите, что элемент Теги в строке меню будет затронут:)

Надеюсь, это поможет

...