触发事件时更改元素的高度（javascript）答案

【问题标题】：Changing height of element when event is fired (javascript)触发事件时更改元素的高度（javascript）
【发布时间】：2019-01-19 23:31:51
【问题描述】：

当我有点击事件时，我想改变 at 元素的高度。高度设置为自动，但是当事件触发时，我想用不同的高度绘制图表..

我的 HTML 看起来像：

<table class="col-sm-12">
                         <tr>
                             <td>
                                 <div class="col-sm-12" style="height: 300px; overflow: auto !important; text-align:left" id="errorTable">
                                 </div>
                             </td>
                             <td>
                                <table class="col-sm-12">
                                    <tr> <td style="height:300px; width:100%" id="Chart"></td></tr>
                                    <tr> <td id="errorDetails" style="height:100%; width: 100%"></td></tr>
                                </table>
                             </td>
                        </tr>
                     </table>

和部分javascript：

document.getElementById('Chart').setAttribute("style", "height:75");
 document.getElementById('Chart').style.height = "75px";

什么都试过了，还是不行……

现在我发现，当我将 ID="chart" 的高度预定义为 100% 时，我可以在之后进行更改。但这对我不起作用。我需要在开始时将图表高度的大小设置为 300px，然后更改它。但我不工作....

【问题讨论】：

你厌倦了做什么？请将您的代码添加到 sn-p 中，所以有人很快解决了您的问题
第一个不起作用，因为缺少单元，但第二个应该可以正常工作
当你看起来好像也在使用某种网格系统时，有什么理由使用表格和嵌套表格？表格只能用于表格数据，不能用于布局

标签： javascript html css height

【解决方案1】：

当您尝试将高度应用于 td 标签时，它不会被应用。有关此click here的更多详细信息

所以你可能需要在你的 td 标签中放置一个 div 并对其应用高度。

HTML

<table class="col-sm-12">
   <tr>
      <td>
         <div class="col-sm-12" style="height: 300px; overflow: auto !important; text-align:left" id="errorTable">
         </div>
     </td>
     <td>
       <table class="col-sm-12">
           <tr>
             <td >
              <div id="Chart" style="height:300px; width:100%">
              </div>
             </td>
          </tr>
          <tr>
            <td>
              <div id="errorDetails" style="height:100%; width: 100%">
              </div>
            </td>
          </tr>
       </table>
    </td>
   </tr>
</table>

Javascript

document.getElementById('Chart').style.height = "75px";

这是一个有效的jsfiddle

【讨论】：