textarea的高度设置不正确

Question

我试图将我的表格的宽度（178px）和高度（178px）设置为单击按钮时文本区域的宽度和高度。宽度（178px）设置可以正常工作，但高度只设置为17px（我猜想178px的8种切片正在发生 - 在这部分需要帮助）。我尝试过element.style.height，element.offsetHeight，element.clientHeight，element.getBoundingClientRect（） 。高度 一切结果都是一样的。我提到很多关于这方面的帖子......许多开发人员在设置高度时遇到问题，但宽度很大，可能是因为它们很好。可能是什么原因？谢谢。

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

希望这有助于！