JavaScript onclick() text size increase with EventListener

问题

I am trying to implement the following to increase text size based on button click. I am trying to use one handler for this. The idea is to increase/decrease the fontsize for the text in "demo" area by +/-5 px. But I am not getting the desired result.

<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>

When I checked it in developers console, I see that my target has the same value as button1. But I cannot see the font size increasing (same is true for button2).

I tried to use my java knowledge as much as I can, but not getting anywhere. I think I might be using the wrong element Id or I am not registering the handler correctly.

Any help or kind suggestion is appreciated ! Thanks.

回答1:

A couple of points:

The style object won't have values that are applied via stylesheets; to get those, on a standards-compliant browser you use getComputedStyle. (On older IE, you use the currentStyle property.)
You need to parse the value you get, because it's a string.
Any time you find yourself repeatedly writing the same thing over and over, consider whether to do it once and remember it in a variable.

This does the trick on standards-compliant browsers and should work on older IE as well:

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";
  }
}

<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>

来源：https://stackoverflow.com/questions/26652595/javascript-onclick-text-size-increase-with-eventlistener

标签

javascript

html

button

action

handler