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：将元素显示为内联元素

display：table：让元素表现得像table元素

＆＃13;

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;*/
}

＆＃13;

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

＆＃13;

希望这有帮助！

textarea的高度设置不正确

1 个答案: