尝试使用Javascript调整点击文字的大小，我在做什么错？

Question

I'm trying and failing to create an on click function to resize some text. Can anyone see what I'm doing wrong? I definitely know the code isn't correct, because I'm such a noob at Javascript. Cheers in advance!

    <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

it should be

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

instead of:

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

FIDDLE

Answer 2

Option one:

Call myFunction onclick and pass the ID and the font-size, them handle with the manipulation in the script file. (good)

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>

Option two:

handle with the manipulation in the HTML. (not good)

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

Option three:

Use jquery. (very good)

First call jquery cdn:

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

Them:

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

Answer 3

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

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