Need this to be more efficient... Ideas?

JavaScript
1

I tried to use “getChildNodes” on the following code (and yes, it’s ugly), but I couldn’t get it to work. But anyway, the following method gets fired when someone clicks on it inside a link and what it does is simply increase font size. Unfortunately, it’s only being applied to paragraph and anchor tags. I need anything inside the passed parameter and I’m unsure about how to do this… Ideas?

Here’s the code:

function increaseFontSize(n){
    if(!n){
        var p = document.getElementsByTagName('p');
        var a = document.getElementsByTagName('a');
    }else{
        var p = document.getElementById(n).getElementsByTagName('p');
        var a = document.getElementById(n).getElementsByTagName('a');
    }

    for(i=0;i<p.length;i++) {
        if(p[i].style.fontSize) {
            var s = parseInt(p[i].style.fontSize.replace("px",""));
            var z = parseInt(p[i].style.lineHeight.replace("px",""));
        }else{
            var s = 100;
            var z = 100;
        }
        if(s!=max){
            s += 10;
            z += 10;
        }
    p[i].style.fontSize = s+"%";
    p[i].style.lineHeight = z+"%";
    }

    for(i=0;i<a.length;i++) {
        if(a[i].style.fontSize) {
            var b = parseInt(a[i].style.fontSize.replace("px",""));
            var d = parseInt(a[i].style.lineHeight.replace("px",""));
        }else{
            var b = 100;
            var d = 100;
        }
        if(b!=max){
            b += 10;
            d += 10;
        }
    a[i].style.fontSize = b+"%";
    a[i].style.lineHeight = d+"%";
    }

}
2

jQuery may be a good option in this case. Would certainly reduce the amount of code here.

$(document).ready(function() {

	   $(".reactive").click(function() {
	     var size = $(this).css('font-size');
	     var sizeNum = parseFloat(size, 10);
	     var newSize = (sizeNum * 1.2);
	     $(this).css('font-size', newSize);
	    });

	});
3

jQuery could work I guess, but I feel like I’m taking a sledgehammer to an ant hill with doing that. I mean, yeah, that initializing call or whatever is tiny, sure, but the jQuery library itself is massive.

4

If all the font sizes were specified using em instead of px then you’d only need to update the size on the outermost container that you want affected in order to automatically change all the enclosed elements. With px it is a lot harder than it needs to be because you need to update each element individually.