我正在编写一个脚本来在调用mouseover时更改按钮位置，我浪费了2个小时来弄清楚如果我在开头包含<!DOCTYPE html>那么按钮将不会移动{{1但是，如果我删除了mouseover，则按钮会正确地改变位置。
这是我的代码：
<!DOCTYPE html>
index.html <html>
<head>
<title>My First Page</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1 style="position:absolute; left:220px; top:175px; width:auto; height:210px;">Are You a Bird? </h1>
<div id="By" style="position:absolute; left:285px; top:235px; width:210px;
height:210px;">
<input type="button" value=" YES " onclick="yes()" />
</div>
<div ID="Bn" style="position:absolute; left:360px; top:235px; width:210px; height:210px;">
<input type="button" value=" NO " onmouseover="foo()" />
</div>
</body>
</html>
script.js为什么包含var flag=1;
function foo(){
if(flag==1)
{
Bn.style.top=90;
Bn.style.left=500;
flag=2;
}
else if(flag==2)
{
Bn.style.top=90;
Bn.style.left=50;
flag=3;
}
else if(flag==3)
{
Bn.style.top=235;
Bn.style.left=360;
flag=1;
}
}
会导致更改元素定位的麻烦？
答案 0 :(得分：3)
<!DOCTYPE html>表示您正在使用HTML5，它绝不是坏事或恶事。 HTML5提供了一些很棒的功能，包括我最喜欢的一个（HTML5 Canvas）。
到你的代码看这里：
<input type="button" value=" YES " onclick="yes()" />
请注意，您的JS文件yes()未定义。
现在为什么看起来onmouseover不起作用。实际上它工作正常，问题就在这里：
Bn.style.top=90;
Bn.style.left=500;
请记住，在CSS中，我们需要将其设置为数字，然后是文本＆＃34; px＆＃34;。喜欢＆＃34; 90px＆＃34;。所以要在JavaScript中使用字符串：
Bn.style.top = "90px";
Bn.style.left = "500px";
它有效。 Here是一个快速小提琴示例，使用您的代码与＃34; #px＆＃34;加入。
那么为什么HTML5会这样做呢？我们无法使用整数？
在没有HTML5的情况下，您可以使用90或"90px"更改排名，使用<!DOCTYPE html>使用整数不起作用，您需要使用"90px"等字符串。这背后的原因主要是因为单位惯例，它使用了清晰的像素。