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 支持选项 "smaller" 并且"bigger"。当我单击一个图像时 -> 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 文件更新了代码

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

HTML clickable image has to resize font

html

dreamweaver