Question

我试图创建一个on click函数来调整某些文本的大小。谁能看到我做错了什么？我当然知道代码是不正确的，因为我在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和font-size，它们处理脚本文件中的操作。（良好）

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单击调整文本大小，我做错了什么？

3 个答案: