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>

希望這有助於！