textarea的scrollHeight

发表于 2009年05月31日 soncy 2,257次阅读

在写昨天那篇日志《javascript删除元素节点》时，用自己修改的runcode插入了一段代码，用的是[runcode][runcode]的方式，按照我插件的实现方式，[runcode]标签没有参数时，他的高度应该是根据内容自适应的才是，用的方法是取得<textarea>的scrollHeight然后赋值给他的height，但是在firefox下却没有得到我想要的表现，发现他的高度始终是100px，除非<textarea>中的内容高度超过了100px，scrollHeight的值才会改变，试着运行下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN"> <head> <style type="text/css"> #xx{height:80px;font-size:12px;width:300px;} </style> </head> <body> <textarea id="xx"> <div> </div> <script type="text/javascript"> var textareaObj = new (function(){ this.textarea = document.getElementById("xx"); this.xx = function(){ this.textarea.style.height = this.textarea.scrollHeight + "px"; } this.checkHeight = function(){ alert("高度是"+this.textarea.scrollHeight + "px"); } })(); window.onload = function(){ textareaObj.xx(); } </script> </textarea> <button onclick="textareaObj.checkHeight()">点击计算高度</button> <script type="text/javascript"> var textareaObj = new (function(){ this.textarea = document.getElementById("xx"); this.xx = function(){ this.textarea.style.height = this.textarea.scrollHeight + "px"; } this.checkHeight = function(){ alert("高度是"+this.textarea.scrollHeight + "px"); } })(); window.onload = function(){ textareaObj.xx(); } </script> </html>

提示：你可以先修改部分代码再运行。

第一段代码中<textarea>中的代码是

<div>
</div>
<script type="text/javascript">
var textareaObj = new (function(){
	this.textarea = document.getElementById("xx");
	this.xx = function(){
		this.textarea.style.height = this.textarea.scrollHeight + "px";
	}
	this.checkHeight = function(){
                          alert("高度是"+this.textarea.scrollHeight + "px");
	}
})();
window.onload = function(){
	textareaObj.xx();
}
</script>

这段内容高度超过了80px，所以firefox下得到的高度是210px，但是第二段代码中，<textarea>中的代码只有<div></div>，但得到的高度却是80px，正好是在css中定义的，<textarea>的高度，只要把css中定义的高度去掉，就能得到文本的高度了，您可以修改代码然后运行试试。