这段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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>柱状体</title><style type="text/css">*{font-size:12px;}#div1{width:200px; height:200px; border:1px solid green; background-color:#ccc; position:relative;}#son{width:200px; height:20px; border:1px solid blue; background-color:#bbb; position:absolute;}</style><script type="text/javascript">window.onload = function(){ var oDiv = document.getElementById('div1'); var oSpan = document.getElementById('son');
timer = null; oSpan.onmouseover = function() { startMove(); } oSpan.onmouseout = function() { stopMove(); } function startMove() { clearInterval(timer); timer = setInterval(function(){ if(oSpan.offsetHeight >= 200) { clearInterval(timer); } else { oSpan.style.height = oSpan.offsetHeight + 1 +'px'; } }, 30); } function stopMove() { clearInterval(timer); timer = setInterval(function(){ if(oSpan.offsetHeight <= 20) { clear(timer); } else { oSpan.style.height = oSpan.offsetHeight - 1 +'px';//当我把这里的1改成10问题不大，但是1就不行了，它会一直向下。 } }, 30); } }</script></head><body><div id="div1"> <span id="son"> <a>了不起的C语言！了不起的C语言！了不起的C语言！了不起的C语言！了不起的C语言！</a> </span></div></body></html>
哪位大神给解释下？
问题的关键就是offsetHeight属性，
用一个变量保存span的高度，通过变量值的变化来改变span的高度，如下：
window.onload = function () {var oDiv = document.getElementById('div1');
var oSpan = document.getElementById('son');
var timer = null;
var sH = oSpan.offsetHeight;
oSpan.onmouseover = function (e) {
startMove();
}
oSpan.onmouseout = function (e) {
stopMove();
}
function startMove() {
clearInterval(timer);
timer = setInterval(function () {
if (sH >= 200) {
clearInterval(timer);
}
else {
sH++;//控制sH的递增值即可
oSpan.style.height = sH + 'px';
}
}, 30);
}
function stopMove() {
clearInterval(timer);
timer = setInterval(function () {
if (sH <= 20) {
clearInterval(timer);
}
else {
sH--;//控制sH的递减值即可
oSpan.style.height = sH + 'px'
}
}, 30);
}
}追问
你这个的确可行。我就是想知道我错在哪里。而且后面我想在合并代码时，将-1和1当参数传入。能再帮我看看么？sH--和sH++，如果不是加1减1呢？如果是5呢？
追答这个当然可行，我测试过了的，你错在不能用offsetHeight属性来加减，要用变量。
这个变量加1也好，5也好，都是可以的。
sH++直接换成sH +=n，反之亦然？
追答当然，你先试试啊。
追问我试过可以，但我还是纠结自己写的，用JQ倒是很容易的，我是想做这样的效果：
我想当鼠标移入时，文字会从上或下冒出来，鼠标移出，显示原图片。
问题就是offsetHeight属性的问题，改变style.height的时候offsetHeight似乎不是跟着变化的，而且offsetHeight还和浏览器有关系，存在兼容问题。
用jquery肯定好一点，里面有height()方法直接取高度。