HTML頁面加載完後，根據內容調整元素的高度

假如我的HTML中有一個textarea元素，我想在它加載完成後根據內容調整其高度。怎麼做呢？

1. 我定義的textarea元素如下

<textarea class="form-control" type="text" name="value" id="value"
          placeholder="輸入參數值"></textarea>

注意： id = 'value'

這裏的關鍵問題是html加載完後會調用哪個函數，有以下兩種方法：

2.1 方法一：通過調用$(document).ready(function () {} )

<script type="text/javascript">
    function get_text_rows(text) {
        return text.split("\n").length;
    }
    
    $(document).ready(function () {
        document.getElementById('value').rows = get_text_rows($('#value').val());
    });
</script>

2.2 方法二：通過調用window.onload

<script type="text/javascript">
    function get_text_rows(text) {
        return text.split("\n").length;
    }
    
    window.onload = function() {
        document.getElementById('value').rows = get_text_rows($('#value').val());
    }
</script>

function get_text_rows(text) {
    return text.split("\n").length;
}

function get_text_rows_autosize(text) {
    var row = 5;
    var lineArrs = text.split("\n");
    var resizeNumber = is_ie ? 1 : 0;
    resizeNumber += lineArrs.length;

    var colsSize = 40;
    for(var i=0; i<lineArrs.length; i++) {
        if(lineArrs[i].length >= colsSize){
            resizeNumber += Math.ceil(lineArrs[i].length/colsSize)
        }
    }
    resizeNumber = Math.max(resizeNumber, row);

    return resizeNumber;
}