有没有js高手，帮我看下我这个代码是什么问题？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--<html>-->
<head>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
<textarea style="overflow-y:auto; height: 50px;">sdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfdddddddddddddddddddddddddddd</textarea>
<button id="add">Add Textarea</button>
<button id="currentHeight">Current Height</button>
<button id="realHeight">Real Height</button>
</body>
<script>
$(function() {
$("textarea").each(function() {
$textarea = $(this);
var realHeight = $textarea.get(0).scrollHeight*2.7;
alert(realHeight);
if(realHeight > 100) {
$textarea.css("overflow-y", "auto");
$textarea.height(100);
}
});
/*$("textarea").keyup(function() {
if($textarea.height() > 100) {
$textarea.css("overflow-y", "auto");
$textarea.height(100);
}
});*/ $("#add").click(function() {
var html = "<textarea style='overflow-y:auto; height: 50px;'></textarea>";
$("body").append(html);
}); $("#currentHeight").click(function() {
alert($("textarea:first").height());
}); $("#realHeight").click(function() {
alert($("textarea:first").get(0).scrollHeight);
}); $(document).on("keyup", "textarea", function() {
var $textarea = $(this);
var realHeight = $textarea.get(0).scrollHeight;

var currentHeight = $textarea.height();
if(realHeight > 100) {
$textarea.css("overflow-y", "auto");
} else {
$textarea.css("overflow-y", "visible");
}

if(realHeight > 100) {
$textarea.height(100);
} else {
if(realHeight > 50) {
$textarea.height($textarea.get(0).scrollHeight);
} else {
$textarea.height(50);
}
}
//alert($textarea.height());
$textarea.css("overflow-y", "auto");

});
});
</script>
</html>这段代码是textarea自适应高度，我自己写的，但是，我一开始初始化的时候，弹出来的textarea真实的高度，和通过按钮获得textarea真实的高度不一样，而按钮获得的高度才是真正的高度，求解，这是怎么回事。javascriptjsjquery

解决方案 »

  1.   

    scrollHeight 是指内容里的高度，不是textarea本身的高度
      

  2.   

    你在代码不是设置高度了吗：$textarea.height(100);
      

  3.   

    第一次alert的是textarea的计算高度currentHeight返回的是textarea元素所占的高度
      

  4.   

    第一次alert出来的时候，我用的是scrollHeight，这应该是textarea的真实高度吧？但是得到的值却是不准确 的，这是怎么回事？
      

  5.   

    是的，我就是要得到他的实际高度，但是刷新浏览器，第一次得到的高度却是不准确的，而通过按钮获取的高度确实他真实的高度，但是两种方式的代码是一样的，一直想不通这是怎么回事
    我试是是一样的
     $textarea.get(0).scrollHeight*2.7 ，不会是 *2.7 你说不一样吧
      

  6.   

    第一次alert出来的时候，我用的是scrollHeight，这应该是textarea的真实高度吧？但是得到的值却是不准确 的，这是怎么回事？
    textarea的高度是占document的高度，scrollHeight的高度是textarea中内容的高度
      

  7.   

    是的，我就是要得到他的实际高度，但是刷新浏览器，第一次得到的高度却是不准确的，而通过按钮获取的高度确实他真实的高度，但是两种方式的代码是一样的，一直想不通这是怎么回事
    我试是是一样的
     $textarea.get(0).scrollHeight*2.7 ，不会是 *2.7 你说不一样吧

    不是，发帖的时候忘记把2.7去掉了，你去掉就知道不行了，在里面输入很多个字符创，让textarea出滚动条，完了之后刷新一下，这个时候会alert出来一个值，会发现和textarea真实的高度不一样
      

  8.   

    第一次alert出来的时候，我用的是scrollHeight，这应该是textarea的真实高度吧？但是得到的值却是不准确 的，这是怎么回事？
    textarea的高度是占document的高度，scrollHeight的高度是textarea中内容的高度
    我知道，我是问，为什么第一次刷出来的时候高度和真实的高度不一样
      

  9.   

    是的，我就是要得到他的实际高度，但是刷新浏览器，第一次得到的高度却是不准确的，而通过按钮获取的高度确实他真实的高度，但是两种方式的代码是一样的，一直想不通这是怎么回事
    我试是是一样的
     $textarea.get(0).scrollHeight*2.7 ，不会是 *2.7 你说不一样吧

    不是，发帖的时候忘记把2.7去掉了，你去掉就知道不行了，在里面输入很多个字符创，让textarea出滚动条，完了之后刷新一下，这个时候会alert出来一个值，会发现和textarea真实的高度不一样
    你是在IE下测试吧，scrollHeight 会根据内容变化，IE下刷新后赋值
    window.onload=function(){
     alert($("textarea:first").get(0).scrollHeight);
    }，或者用 setTimeout 一下 
      

  10.   

    是的，我就是要得到他的实际高度，但是刷新浏览器，第一次得到的高度却是不准确的，而通过按钮获取的高度确实他真实的高度，但是两种方式的代码是一样的，一直想不通这是怎么回事
    我试是是一样的
     $textarea.get(0).scrollHeight*2.7 ，不会是 *2.7 你说不一样吧

    不是，发帖的时候忘记把2.7去掉了，你去掉就知道不行了，在里面输入很多个字符创，让textarea出滚动条，完了之后刷新一下，这个时候会alert出来一个值，会发现和textarea真实的高度不一样
    你是在IE下测试吧，scrollHeight 会根据内容变化，IE下刷新后赋值
    window.onload=function(){
     alert($("textarea:first").get(0).scrollHeight);
    }，或者用 setTimeout 一下 

    你的意思是说，IE是在刷新完页面之后，再将textarea里的值赋给它吗？$(function() {});这里面写的代码不是在文档加载完之后才执行的吗？我好像知道点眉目了，麻烦你再给我说说，万分感激
      

  11.   


    IE是在刷新完页面之后，再将textarea里的值赋给它吗， 是的
    JQ的 ready 事件 会比 onload快，它现在好像是改成用  document.readyState === "complete" 判断
      

  12.   


    IE是在刷新完页面之后，再将textarea里的值赋给它吗， 是的
    JQ的 ready 事件 会比 onload快，它现在好像是改成用  document.readyState === "complete" 判断
    用这个可以判断吗？这个是在所有内容全部完全加载完之后才开始执行这里面的代码吗？怎么用？我试了一下，好像不行呀
      

  13.   

    这样试试<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <!--<html>-->
    <head>
     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
    <textarea style="overflow-y:auto; height: 50px;">sdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfddddddddddddddddddddddddddddsdfsadfsdfsadfdddddddddddddddddddddddddddd</textarea>
    <button id="add">Add Textarea</button>
    <button id="currentHeight">Current Height</button>
    <button id="realHeight">Real Height</button>
    </body>
    <script>
    setTimeout(function() {
    $("textarea").each(function() {
    $textarea = $(this);
    var realHeight = $textarea.get(0).scrollHeight ;
    alert(   realHeight )
    if(realHeight > 100) {
    $textarea.css("overflow-y", "auto");
     $textarea.height(100);
    }
    });
    /*$("textarea").keyup(function() {
    if($textarea.height() > 100) {
    $textarea.css("overflow-y", "auto");
    $textarea.height(100);
    }
    });*/ $("#add").click(function() {
    var html = "<textarea style='overflow-y:auto; height: 50px;'></textarea>";
    $("body").append(html);
    }); $("#currentHeight").click(function() {
    alert($("textarea:first").height());
    }); $("#realHeight").click(function() {
    alert($("textarea:first").get(0).scrollHeight);
    });
     
    $(document).on("keyup", "textarea", function() {
    var $textarea = $(this);
    var realHeight = $textarea.get(0).scrollHeight;

    var currentHeight = $textarea.height();
    if(realHeight > 100) {
    $textarea.css("overflow-y", "auto");
    } else {
    $textarea.css("overflow-y", "visible");
    }

    if(realHeight > 100) {
    $textarea.height(100);
    } else {
    if(realHeight > 50) {
    $textarea.height($textarea.get(0).scrollHeight);
    } else {
    $textarea.height(50);
    }
    }
    //alert($textarea.height());
    $textarea.css("overflow-y", "auto");
    });
    },100);
    </script>
    </html>
      

  14.   

    我没时间和你玩。真 tmd能装
      

  15.   

    这个我试过了，我在我自己的那里面加了一个setTimeout，延迟一秒，一秒后获得的高度是正确的。就和你写的那样差不多，但是我有点不太想用延迟，因为如果网络慢了，那那个方法先执行了，到时候还是没用呀唉
      

  16.   

    我没时间和你玩。真 tmd能装
    你TMD有病呀，自己回答问题回答偏了，还在这里骂人，你TMD上网上去搜一下，有写的和我一模一样的代码吗？甚至连标点符号都一样的封号什么的，全部一模一样的，去找，找的到再来这里说。你丫人品有问题吧，犯贱是吧，非逼着人骂你是吧？
      

  17.   

    不会的，setTimeout只是为了改变执行顺序，setTimeout(....,1) 也一样，不放心，你可以在外嵌套一个$(function(){ .....  })
      

  18.   

    不会的，setTimeout只是为了改变执行顺序，setTimeout(....,1) 也一样，不放心，你可以在外嵌套一个$(function(){ .....  })
    这个不是根据时间来执行的吗？对了，我上网搜了下，说window.onload是在所有都加载彻彻底底完成后才执行的，那这么说的话应该来说textarea也是加载完成后，应该就能得到scrollHeight的了呀，但是为什么还是得不到呢？
      

  19.   

    不会的，setTimeout只是为了改变执行顺序，setTimeout(....,1) 也一样，不放心，你可以在外嵌套一个$(function(){ .....  })
    可以了，我按照你说的，setTimeout，设置成0都可以哈哈，太感谢你了，谢谢，太谢谢了。
      

  20.   

    不会的，setTimeout只是为了改变执行顺序，setTimeout(....,1) 也一样，不放心，你可以在外嵌套一个$(function(){ .....  })
    可以留个QQ吗？我私信你。多向你请教请教。
      

  21.   

    IE下有这个毛病。firefox，chrome得到的是实际的，window.onload也不行，可能是IE控件呈现有点延时什么的吧，用setTimeout延时100ms就没问题了            setTimeout(function () {
                    $("textarea").each(function () {
                        $textarea = $(this);
                        var realHeight = $textarea.get(0).scrollHeight// * 2.7;
                        alert(realHeight);
                        if (realHeight > 100) {
                            $textarea.css("overflow-y", "auto");
                            $textarea.height(100);
                        }
                    })
                }, 100);
      

  22.   

    如果是HTML文档的原值是在onload时就加载好了，
    但是IE下刷新可以恢复功能是在页面元素加载完成之后再赋值的，他也是在 onlod 执行,所以说我们要在
    onlod之后再后点
      

  23.   

    结贴了。哇哈哈哈哈，我的问题解决了。多谢@fzfei2