javascript - 文本区域的高度设置不正确

Question

我试图通过单击按钮将表格的宽度(178px)和高度(178px)设置为文本区域的宽度和高度。宽度(178px)设置工作正常，但高度仅设置为 17px (我猜想从 178px 开始进行某种 8 的切片——这部分需要帮助)。我尝试了 element.style.height、element.offsetHeight、element.clientHeight、element.getBoundingClientRect().height一切结果都一样。我在 SO 中提到了很多关于这个的帖子......许多开发人员在设置高度时遇到问题，但宽度却很好。可能是什么原因？谢谢。

<p id="demo"></p>
<button onclick="chan()">change</button>

<script type="text/javascript">
    function chan() {
        var w=document.getElementById('num').getBoundingClientRect().width;
        var h=document.getElementById('num').getBoundingClientRect().height;
        document.getElementById("demo").innerHTML=w+" "+h;
        document.getElementById('cache').style.width=w+"px";
        document.getElementById('cache').style.height=h+"px";
    }
</script>

Answer 1

将 table 样式 display: inline; 更改为 display: table; 以获得完美的高度。

table {
  display: table;
  width: 178px;
  height: 178px;
}

display: inline : Displays an element as an inline element

display:table : Let the element behave like a table element

ul {
  list-style-type: none;
}

li {
  display: inline;
  /*not working for list2_tab_ta*/
}

input {
  border: 1px solid black;
  width: 30px;
  height: 30px;
  padding: 5px;
  background-color: grey;
}

#clr {
  margin-left: 190px;
  margin-bottom: 13px;
  padding: 5px;
}

table {
  display: table;
  width: 178px;
  height: 178px;
}

td {
  border: 1px solid black;
  background-color: powderblue;
  width: 30px;
  height: 30px;
  padding: 5px;
}

textarea {
  display: inline;
  /*readonly: true;*/
}

<ul>
  <li>
    <input type="number" id="operator1">
  </li>
  <li>
    <input type="text" id="operand1">
  </li>
  <li>
    <input type="number" id="operator2">
  </li>
  <li>=</li>
  <li>
    <input type="number" id="result">
  </li>
</ul>
<button id="clr">Clear</button>

<ul>
  <li>
    <table id="num">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>+</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>-</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>*</td>
      </tr>
      <tr>
        <td>0</td>
        <td>/</td>
      </tr>

    </table>
  </li>
  <li>
    <textarea id="cache"></textarea>
  </li>
</ul>

<p id="demo"></p>
<button onclick="chan()">change</button>
<script type="text/javascript">
    function chan() {
        var w=document.getElementById('num').getBoundingClientRect().width;
        var h=document.getElementById('num').getBoundingClientRect().height;
        document.getElementById("demo").innerHTML=w+" "+h;
        document.getElementById('cache').style.width=w+"px";
        document.getElementById('cache').style.height=h+"px";
    }
</script>

希望这对您有所帮助!