Increasing/Decreasing font size on button click

问题:

I am sure you guys must have seen that font resizing option on some website where they display alphabet "A" in small, medium and large sizes clicking on which changes the font size of website. I have two questions:

1. What is that thing called actually? Like if there is a term to describe it?
2. What arguments can I give against using this on website? One of the client has asked to incorporate it in website and I don't see any real benefit in using it so what arguments can I give to client against using it?

回答1:

1. It is called "font size change options", or "font resizer". Here is a simple and minimal 5 lines of code jQuery tutorial: http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html

A bit of the code that enlarges the font size:

newFontSize= parseInt($('#content').css('font-size')) + 2;
$('#content').css('font-size', newFontSize);

1. The user could just use CTRL+ in browser. The problem is that the final user doesn't know this trick. This is a fast and simple implementation, no need to convince the client against it. I find myself getting hard to see clear small text after 10 hours of programming. Maybe the client has sight problems and needs to address others like him.

回答2:

"As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px."

Reference

So to do that you can use a function callback which will return the actual value, then you return the new value.

Like the following.

  $("#fontPlusBtn").click(function (){
        $("#textDiv > *").css("font-size", function(i, value) {
            return parseInt(value) * 1.1;
        });
    });

Working Demo for Increasing Font Size on Button Click:

I hope this helps you as you described font size change on Button Click.

回答3:

What is the target group of your client? Adding such feature is generally considered good practice of web accessibility. It doesn't really take up too much space on the screen and doesn't mess with the design but gives users the options to enlarge the text in case they are having troubles reading the text.

I wouldn't try to argue against it but instead find a neat way to implement the functionality.

BBC's accessibility policy is a good read: http://www.bbc.co.uk/accessibility/best_practice/policy.shtml