单击按钮时增加/减小字体大小答案

【问题标题】：Increasing/Decreasing font size on button click单击按钮时增加/减小字体大小
【发布时间】：2014-08-06 03:30:39
【问题描述】：

我相信你们一定在某些网站上看到过字体大小调整选项，他们在小、中和大尺寸中显示字母“A”，点击它会改变网站的字体大小。我有两个问题：

那东西到底叫什么？是否有一个术语来描述它？
我可以针对在网站上使用它提出什么论据？一位客户要求将其整合到网站中，但我认为使用它没有任何实际好处，那么我可以向客户提出哪些反对使用它的论据？

【问题讨论】：

【解决方案1】：

它被称为“字体大小更改选项”或“字体大小调整”。这是一个简单且最少 5 行代码的 jQuery 教程：http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html

一些放大字体大小的代码：

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

用户可以在浏览器中使用 CTRL+。问题是最终用户不知道这个技巧。这是一个快速而简单的实现，无需说服客户反对它。经过 10 小时的编程后，我发现自己很难看到清晰的小文本。也许客户有视力问题，需要解决像他这样的其他人。

【讨论】：

【解决方案2】：

"从 jQuery 1.6 开始，.css() 接受类似于 .animate() 的相对值。相对值是一个以 += 或 -= 开头的字符串，用于增加或减少当前值。例如，如果元素的填充-left 是 10px，.css( "padding-left", "+=15" ) 将导致总 padding-left 为 25px。"

Reference

为此，您可以使用将返回实际值的函数回调，然后返回新值。

如下所示。

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

Demo 用于增加按钮单击时的字体大小：

我希望这对您描述按钮单击时的字体大小更改有所帮助。

【讨论】：

【解决方案3】：

您的客户的目标群体是什么？添加此类功能通常被认为是 Web 可访问性的良好做法。它实际上并没有在屏幕上占用太多空间，也不会弄乱设计，而是为用户提供了放大文本的选项，以防他们在阅读文本时遇到问题。

我不会试图反对它，而是找到一种巧妙的方法来实现该功能。

BBC 的无障碍政策值得一读：http://www.bbc.co.uk/accessibility/best_practice/policy.shtml

【讨论】：