鍍金池/ 問答/HTML/ scrollheight, clientheight 的值為何會自動增加

scrollheight, clientheight 的值為何會自動增加

每按一次鍵，textarea 高度會自動增加，但文字內容并未增加，為何高度會變？
代碼于下連結 jsbin
jsbin 于此展現

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<textarea onclick='go(this)' onkeyup='go(this)'>d545451511515151515
  5151kfjjfkdkdksk</textarea>
</body>
</html>

css

textarea {
    //border: 2px solid #ccc;
    padding: 5px;
    vertical-align: top;
//    width: 95%;
    height: 40px;
    background-color: #FFFFCC;
    width: 110px;  
    border: 12px solid #EBEBEB;
   OVERFLOW: hidden;
}

javascript

function go(xx){
xx.style.height=xx.scrollHeight+ 'px'
//xx.style.height=xx.clientHeight+ 'px';
//alert (xx.style.height);
}
回答
編輯回答
情未了

clientHeight 獲取對象可視區(qū)高度包括padding，不包括滾動條，不包括邊框
scrollHeight 獲取的是真實內容的高度
導致這種情況的原因是 textarea 默認height設置的內容content的高度 不包括padding 所以會一直增加
加上box-sizing: border-box; 就不會出現這種情況

2017年7月5日 07:27