开发者

Javascript to increase/decrease font size (external css)

开发者 https://www.devze.com 2023-03-24 22:46 出处:网络
I managed to pull together a script that will increase the font sizes of parts of a web page using buttons or links. It works in Moz/Chrome, but sticks on IE, tho theoretically it shouldn\'t have a is

I managed to pull together a script that will increase the font sizes of parts of a web page using buttons or links. It works in Moz/Chrome, but sticks on IE, tho theoretically it shouldn't have a issue in these major browsers. But I'm stuck on whether or not it's possible to use currentS开发者_开发知识库tyle to get the fontSize from a variable populated by getElementsByName; certainly IE is drawing blanks.

Here's my script:

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';
    }
}

The 3 sites I've used to pull this together are:

www.vijayjoshi.org

www.quirksmode.org

and (this isn't spam, this is actually important) //http://www.white-hat-web-design.co.uk/blog/controlling-font-size-with-javascript/

Can anyone point out a solution please? Thanks in advance!


what about updating your code with the following :

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

}

I have updated script with fix and few better naming for some variables.

Also, I am sorry cause I am on Mac right now, I wasn't able to test the provided script in IE ... but from what I remember it should do the trick.

Using some JS console you can directly execute directly on this page

changeFontSize("nav-tags", 50);

and you will notice that the Tags element in the menu bar would get affected :)

Hope this helps

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号