Javascript AA 字体放大辅助功能

Question

好吧，基本上我需要帮助来创建一个通过单击鼠标增加字体大小的代码。这是一个例子: http://www.rnib.org.uk/右上角有 3 个 AAA，可增加页面字体大小等

我当前的代码是

// JavaScript Document
var min = 12;
var max = 32;

function increaseFontSize() {
    var p = document.getElementsByTagName('p');
    for (i = 0; i < p.length; i++) {
        if (p[i].style.fontSize) {
            var s = parseInt(p[i].style.fontSize.replace("px", ""));
        } else {

            var s = 12;
        }
        if (s != max) {
            s += 1;
        }
        p[i].style.fontSize = s + "px"
    }
}

function decreaseFontSize() {
    var p = document.getElementsByTagName('p');
    for (i = 0; i < p.length; i++) {

        if (p[i].style.fontSize) {
            var s = parseInt(p[i].style.fontSize.replace("px", ""));
        } else {
            var s = 12;
        }
        if (s != min) {
            s -= 1;
        }
        p[i].style.fontSize = s + "px"
    }
}

它在 HTML 中的实现如下:

<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>

我的仅适用于标记为“p”的项目，任何人都可以帮我创建它，以便该功能像 RNIB.org 网站一样工作

Answer 1

我认为你可能把事情过于复杂化了。我会更多地从 CSS Angular 来处理这个问题，并通过 JS 进行一些小的工作。我会:

• 在容器元素上使用类名
• 使用 CSS 设置多种不同尺寸的样式
• 点击加号/减号链接时使用JS更改类名

HTML:

<a href="javascript:smallFontSize();">Small Font</a>
<a href="javascript:largeFontSize();">Large Font</a>
<a href="javascript:normalFontSize();">Normal Font</a>

<div id="myContainer" class="size-normal">
  <h1>Some header</h1>
  <p>Some paragraph</p>
  <ul>
    <li>Some list item</li>
  </ul>
</div>

CSS:

#myContainer.size-normal { font-size: 12px; }
#myContainer.size-large { font-size: 14px; }
#myContainer.size-small { font-size: 10px; }

JS:

var containerEle = document.getElementById('myContainer');
function smallFontSize() {
  containerEle.className = "size-small";
}
function largeFontSize() {
  containerEle.className = "size-large";
}
function normalFontSize() {
  containerEle.className = "size-normal";
}