尝试使用 Javascript 调整单击时的文本大小，我做错了什么？

Question

我正在尝试创建点击功能来调整某些文本的大小，但未能成功。谁能看到我做错了什么？我绝对知道代码不正确，因为我在 Javascript 是个菜鸟。提前干杯！

    <div class="Appraisals" id="change">
  <div align="left"><span class="Block1">Random text that nobody cares about.
Random text that nobody cares about.Random text that nobody cares about. </span></div> 
    <button type="button" 
onclick="document.getElementById('change').style.height "50px"; >
Click Me!</button>
</div>
<div class="inspire"> <img src="inspire.jpg" alt="Crest" height="200"></div>

Answer 1

应该是

document.getElementById('change').style.fontSize = '50px'

而不是：

document.getElementById('change').style.height "50px";

FIDDLE

Answer 2

选项一：

调用 myFunction onclick 并传递 ID 和字体大小，它们处理脚本文件中的操作。（好）

HTML:

    <div class="Appraisals" id="change">
      <div align="left"><span class="Block1">Random text that nobody cares about.
         Random text that nobody cares about.Random text that nobody cares about.</span>
      </div> 
      <button type="button" onclick="myFunction('change', '50px');" > Click Me!</button>
       Click Me!
      </button>
    </div>
    <div class="inspire"> <img src="inspire.jpg" alt="Crest" height="200"></div>

JS:

<script>
   function myFunction(element, clr) {
     var changeId = document.getElementById(element);
     changeId.style.fontSize=clr;
   }
</script>

选项二：

处理HTML中的操作。（不好）

    <div class="Appraisals" id="change">
      <div align="left"><span class="Block1">Random text that nobody cares about.
         Random text that nobody cares about.Random text that nobody cares about.</span>
      </div> 
      <button type="button" onclick="document.getElementById("change").style.fontSize="50px"" > Click Me!</button>
       Click Me!
      </button>
    </div>
    <div class="inspire"> <img src="inspire.jpg" alt="Crest" height="200"></div>

选项三：

使用jquery。（很好）

先调用jquery cdn:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

他们：

<script>
  $(document).ready(function() {
     $('button').click(function() {
       $('#change').css('font-size', '50px');
     });
  });
</script>

Answer 3

是否要更改文本的大小...而不是高度？

document.getElementById('change').style = 'font-size:50px;'

尝试使用 Javascript 调整单击时的文本大小，我做错了什么？

Trying to resize text on click with Javascript, what am I doing wrong?

html

javascript

events

resize

onclick