Modifying CSS on the fly using jquery

I've read a bunch of the answers to similar requests for dynamic styling, but I still have a few questions.

My final result is to have 2 buttons on my page that allows a user to increase or decrease the font size. I've seen this around, and it doesn't seem that it should be that complicated...

My C# project is using .less, and jquery 1.10.1.

var items = $('[class]').css('font-size');

$(items).each(function(index){        
    alert('Text:' + $(this).text());        
    $(this).css('font-size') =($(this).css('font-size').val() * 6) ;         
});

I expect the items collection will contain DOM elements that have font-size CSS property. I'd like to take the current size and apply some multiplier to it. In this case, to make it really obvious I was multiplying the current value by 6. This code is within a function that's called from a button click. With a simply alert box within this function the click works. This code doesn't work.

Do I want to use '[class]' to create my collection or is there a slicker way to pull css classes that contain font-size?

Is this something that is going to have to be done on each page, or does the css value get cached somewhere?

Is there an easier way to do this? I don't want to have 3 different style sheets, if it's not needed. Thanks for your help!