HTML可点击图像必须调整字体大小

Question

我正在建立一个网站，我正在尝试一些我无法弄清楚它必须如何工作的东西。

在我的菜单中，我有 2 张图片。

 <li id="fontup"><img width="40" height="40" src="images/fontup.png"/></li>
 <li id="fontdown"><img width="40" height="40" src="images/fontdownpng.png"/></li>

这 2 个图像代表我菜单中的一个按钮，如果单击它，网站上的字体大小必须增加或减少 1。我知道 HTML 支持“更小”和“更大”选项。 当我单击一个图像时-> 必须运行 JavaScript 或 jQuery 来调整字体大小。 我该怎么做？ （我是 HTML 和 Dreamweaver 的初学者）

目前我有这个：

<script type="text/javascript">
  window.onload = function() {
  document.getElementById("fontup").onclick = function() {
  var listValue = selectTag.options[selectTag.selectedIndex].text;
  document.getElementById("font").style.fontSize = larger;
  };
  };
</script>

如您所见，我从网站上的教程中得到了这个，但我不知道我需要定制更多内容才能使其正常工作？ 我还设置了一个带有 id="font" 的 p 元素来测试它，但显然这不起作用。

** 更新： 我现在的代码是：

在我的 index.html =

脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/FontsSize.js"></script>

我的 2 个按钮

<li> <button id="fontup"><img width="40" height="40"    src="images/fontup.png"/>  </button></li>
<li> <button id="fontdown"><img width="40" height="40" src="images/fontdownpng.png"/> </button></li>

为了测试我也有这个：

<div id="test">lorem ipsum etc</div>

在一个单独的 .js 文件中，我有以下代码：

var fs = 23;
$(document).ready(function() {
$('#test').css('font-size', fs);
});

 $("#fontup").click(function() {
fs++
$("#test").css('font-size', fs);
});

$("#fontdown").click(function() {
fs--
$("#test").css('font-size', fs);
});

这怎么还是不行？ 如果我更新 var fs 大小确实会改变......但如果我点击按钮......它不会。

Answer 1

如果您可以使用 jquery（如您的问题中所述），这将满足您的需求。您首先设置页面加载的默认大小，然后在每次单击按钮时重置字体大小（向上或向下）。下面的代码将调整大小应用于div，但如果您想更改所有内容的字体大小（具有更具体字体大小声明的元素除外），您可以将其应用于body

var fs = 23;
$(document).ready(function() {
  $('#content').css('font-size', fs);

  $('#fontUp').click(function() {
    fs++
    $('#content').css('font-size', fs);
  });

  $('#fontDown').click(function() {
    fs--
    $('#content').css('font-size', fs);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="fontUp">UP</button>
<br>
<br>
<button id="fontDown">DOWN</button>
<br>
<br>
<div id="content">lorem ipsum etc</div>

编辑：为外部 JS 文件更新代码