js动画失效，js函数内部规定原始css可以运行，外部html中#div{}定义原始css不能运行

添加一段代码，改成用js规定#line2的css，最后直接onclick调用positionLine2()，就可以运行了。
但是我注释掉js中规定#line2的css的部分，然后再html中用css直接定义，就不行了
像下面这样：

p#line2 {
    color: #66ceff;
    position: absolute;
    top: 350px;
    left: 140px;
    font-size: 90px;
}
<script>

.....

function positionLine2() {
        if (!document.getElementById) return false;
        if (!document.getElementById("line2")) return false;
        /*
        var elem = document.getElementById("line2");
        elem.style.color = "#66ceff";
        elem.style.position = "absolute";
        elem.style.left = "140px";
        elem.style.top = "350px";
        elem.style.fontSize = "90px"
        */
        moveAE("line2", 290, 150, 5)
    }
   
.....

var bott = document.getElementById("botton")

bott.addEventListener("click", function() {
    positionLine2()
})

我觉得可能跟局部变量之类的有关系……但是并不清楚，只是js入门新手，希望知道原因的大神能指点一下

谢谢各位的帮助~~新手捂脸感谢
代码根据各位前辈的指点改过一遍了，修改部分在上面备注指出，但是还是不行，这些代码的主要功能就是两行文字在点击按钮之后移动，但就是实现不了，继续求挑问题。

另外，还有一点别的疑惑，为什么repeat要这样用字符串的方式写

var repeat = "moveAE('" + elementid + "'," + xfi + "," + yfi + "," + intime + ")"

而不能直接向下面这样呢？

var repeat = moveAE(elementid, xfi, yfi, intime)

原始代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hey</title>
</head>
<style type="text/css">
p#line1 {
    color: transparent;
    -webkit-text-stroke: 1px #66ceff;
    position: absolute;
    top: 350px;
    left: 140px;
    font-size: 90px;
}

p#line2 {
    color: #66ceff;
    position: absolute;
    top: 350px;
    left: 140px;
    font-size: 90px;
}
#botton {
    background-color:transparent;
    border: 1px #66ceff solid;
    position: absolute;
    top: 250px;
    left: 520px;
    font-size: 30px;
    color:#66ceff;
    width:150px;
    height:46px;
    line-height:40px;
    text-align:center;

}

/*#botton :hover{ 错误*/
#botton :hover{
    background-color:#66ceff;
    color:#ffffff;
}




</style>

<body>
    <p id="line1">Hello,John.</p>
    <p id="line2">削了个椰子，你却给个梨</p>
    <div id="botton">
        move
    </div>
</body>
<script type="text/javascript">
/*function moveAE("elementid", xfi, yfi, intime) { 错误*/
function moveAE(elementid, xfi, yfi, intime) {
    if (!document.getElementById(elementid)) return false
    var elem = document.getElementById(elementid)
    var xnow = parseInt(elem.style.left)
    var ynow = parseInt(elem.style.top)
    /*if (xnow = xfi && ynow = yfi) return false 错误*/
    if (xnow == xfi && ynow == yfi) return false
    if (xnow < xfi) {
        xnow++
    }
    if (xnow > xfi) {
        xnow--
    }
    if (ynow < yfi) {
        ynow++
    }
    if (ynow > yfi) {
        ynow--
    }
    elem.style.left = xnow + "px"
    elem.style.top = ynow + "px"
    var repeat = "moveAE('" + elementid + "'," + xfi + "," + yfi + "," + intime + ")"
    movement = setTimeout(repeat, intime)

}
/* 改为用js给按钮绑定事件 */
var bott = document.getElementById("botton")
    bott.addEventListener("click", function() {
        moveAE('line1', 350, 250, 10)
        moveAE('line2', 350, 350, 10)
    })

</script>

</html>

各种失效，代码是照着《javascript DOM编程艺术》写的，查了一遍感觉没错，有大神能看出来问题吗

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hey</title> </head> <style type="text/css"> p#line1 { color: transparent; -webkit-text-stroke: 1px #66ceff; position: absolute; top: 350px; left: 140px; font-size: 90px; } p#line2 { color: #66ceff; position: absolute; top: 350px; left: 140px; font-size: 90px; } #botton { background-color:transparent; border: 1px #66ceff solid; position: absolute; top: 250px; left: 520px; font-size: 30px; color:#66ceff; width:150px; height:46px; line-height:40px; text-align:center; } /*#botton :hover{ 错误*/ #botton :hover{ background-color:#66ceff; color:#ffffff; } </style> <body> <p id="line1">Hello,John.</p> <p id="line2">削了个椰子，你却给个梨</p> <div id="botton"> move </div> </body> <script type="text/javascript"> /*function moveAE("elementid", xfi, yfi, intime) { 错误*/ var movement; function moveAE(elementid, xfi, yfi, intime) { if (!document.getElementById(elementid)) return false; var elem = document.getElementById(elementid); var computedstyle=getComputedStyle(elem); var xnow = parseInt(computedstyle.left)||0; var ynow = parseInt(computedstyle.top)||0; console.log(xnow); /*if (xnow = xfi && ynow = yfi) return false 错误*/ //console.log(elem.style); function animation(){ if (xnow == xfi && ynow == yfi) return; if (xnow < xfi) { xnow++; } if (xnow > xfi) { xnow--; } if (ynow < yfi) { ynow++; } if (ynow > yfi) { ynow--; } elem.style.left = xnow + "px"; elem.style.top = ynow + "px"; movement = setTimeout(function(){ animation(); }, intime); } animation(); } var bott = document.getElementById("botton") bott.addEventListener("click", function() { moveAE('line1', 350, 250, 10); //moveAE('line2', 350, 350, 10); }) </script> </html>

js动画失效，js函数内部规定原始css可以运行，外部html中#div{}定义原始css不能运行

相关课程

相关电子书

js动画失效，js函数内部规定原始css可以运行，外部html中#div{}定义原始css不能运行

相关课程

相关文章

相关电子书