Question

我正在尝试实施以下内容，以便根据按钮点击增加文字大小。我正在尝试使用一个处理程序。我们的想法是将“demo”区域中文本的字体大小增加/减少+/- 5像素。但我没有得到理想的结果。

<html>
    <body>
        <p>Change font size</p>
        <div id="main_area1">
            <button id="button1" value="larger" type="button" onclick="changeFontSize(this)">Larger</button>
        </div>
        <div id="main_area2">
            <button id="button2" vale="smaller" type="button" onclick="changeFontSize(this)">Smaller</button>
        </div>
        <div>
            <p id="demo">HOW_BIG_OR_SMALL_AM_I</p>
        </div>
        <script>
            function changeFontSize(target) {
                if (target == document.getElementById("button1")) {
                    document.getElementById("demo").style.fontSize = document.getElementById("demo").style.fontSize + "5px";
                } else if (target == document.getElementById("button2")) {
                    document.getElementById("demo").style.fontSize = document.getElementById("demo").style.fontSize + "-5px";
                }
            }
        </script>
    </body>
</html>

当我在开发者控制台中检查它时，我发现我的目标与button1具有相同的value。但是我看不到字体大小的增加（对于button2也是如此）。

我尽可能多地使用我的java知识，但没有到达任何地方。我想我可能正在使用错误的元素Id，或者我没有正确注册处理程序。

任何帮助或善意的建议表示赞赏！感谢。

Answer 1

有几点：

style对象不具有通过样式表应用的值;要在符合标准的浏览器上使用getComputedStyle来获取这些内容。（在较旧的IE上，您使用currentStyle属性。）
您需要解析所获得的值，因为它是一个字符串。
任何时候你发现自己反复一遍又一遍地写同样的东西，考虑是否要做一次并记住变量。

这可以解决符合标准的浏览器问题，也适用于旧的IE：

＆＃13;

function changeFontSize(target) {
  var demo = document.getElementById("demo");
  var computedStyle = window.getComputedStyle
        ? getComputedStyle(demo) // Standards
        : demo.currentStyle;     // Old IE
  var fontSize;

  if (computedStyle) { // This will be true on nearly all browsers
      fontSize = parseFloat(computedStyle && computedStyle.fontSize);

      if (target == document.getElementById("button1")) {
        fontSize += 5;
      } else if (target == document.getElementById("button2")) {
        fontSize -= 5;
      }
      demo.style.fontSize = fontSize + "px";
  }
}

＆＃13;

<p>Change font size</p>
<div id="main_area1">
  <button id="button1" value="larger" type="button" onclick="changeFontSize(this)">Larger</button>
</div>
<div id="main_area2">
  <button id="button2" vale="smaller" type="button" onclick="changeFontSize(this)">Smaller</button>
</div>
<div>
  <p id="demo">HOW_BIG_OR_SMALL_AM_I</p>
</div>

＆＃13;

使用EventListener增加JavaScript onclick（）文本大小

1 个答案: