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

2015.11.29 PM 5:47 修改更新

添加一段代码，改成用js规定#line2的css，最后直接onclick调用positionLine2()，就可以运行了。

但是我注释掉js中规定#line2的css的部分，然后再html中用css直接定义，就不行了

像下面这样：

p#line2 {

color: #66ceff;

position: absolute;

top: 350px;

left: 140px;

font-size: 90px;

}

.....

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入门新手，希望知道原因的大神能指点一下

2015.11.29 PM 4:41 修改更新

谢谢各位的帮助~~新手捂脸感谢

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

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

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

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

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

原始代码：

hey

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;

}

Hello,John.

削了个椰子，你却给个梨

move

/*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)

})

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