问题描述
- 一个JS小程序出现了超级奇怪的bug，实在找不到问题求大神支招
-
<!DOCTYPE html><html><head> <title>Hello World</title> <link rel=""stylesheet"" type=""text/css"" href=""Marion.css""> <script language=""javascript"" type=""text/javascript""> function marion () { this.x=0; this.y=0; this.move=function(direct){ var myimg=document.getElementById(""img12""); var left=myimg.style.left; left=left.substr(0(left.length-2)); var top=myimg.style.top; top=top.substr(0(top.length-2)); switch(direct){ case '0':window.alert(myimg.style.left+""+""+myimg.style.top); myimg.style.top=(top-40)+""px"";break; case '1':myimg.style.left=(left-40)+""px"";break; case '2':myimg.style.top=(top+40)+""px"";break; case '3':myimg.style.left=(left+40)+""px"";break; } } } var mario=new marion(); function marionmove(direct){ mario.move(direct); } </script></head><body><div class=""Marion""> <img id=""img12"" src=""aa.jpg"" class=""img1""/></div><table border=""1"" style=""margin: 0 0 0 500px""> <tr><td colspan=""3"" align=""center"">游戏键盘</td></tr> <tr><td></td><td><input type=""button"" value=""↑"" onclick=""marionmove('0')""/></td><td></td></tr> <tr><td><input type=""button"" value=""←"" onclick=""marionmove('1')""/></td><td><input type=""button"" value=""↓"" onclick=""marionmove('2')""/></td><td><input type=""button"" value=""→"" onclick=""marionmove('3')"" /></td></tr> </table></body></html>
解决方案
<!DOCTYPE html>
Hello World
<br> function marion () {<br> this.x=0;<br> this.y=0;<br> this.move=function(direct){<br> var myimg=document.getElementById("img12");<br> var left=myimg.style.left;<br> left=left.substr(0(left.length-2));<br> var top=myimg.style.top;<br> top=top.substr(0(top.length-2));<br> switch(direct){<br> case '0':window.alert(myimg.style.left+"+"+myimg.style.top);<br> myimg.style.top=(top-40)+"px";break;<br> case '1':myimg.style.left=(left-40)+"px";break;<br> case '2':myimg.style.top=(top+40)+"px";break;<br> case '3':myimg.style.left=(left+40)+"px";break;</p><pre><code> } } } var mario=new marion(); function marionmove(direct){ mario.move(direct); }</script></code></pre><p></head><br><body></p><div class=""Marion""> <img id=""img12"" src=""aa.jpg"" class=""img1""/></div><table border=""1"" style=""margin: 0 0 0 500px""> <tr><td colspan=""3"" align=""center"">游戏键盘</td></tr> <tr><td></td><td><input type=""button"" value=""↑"" onclick=""marionmove('0')""/></td><td></td></tr> <tr><td><input type=""button"" value=""←"" onclick=""marionmove('1')""/></td><td><input type=""button"" value=""↓"" onclick=""marionmove('2')""/></td><td><input type=""button"" value=""→"" onclick=""marionmove('3')"" /></td></tr> </table><p></body><br></html><br>上面的代码发瞎了。。</p> 解决方案二：
能不能把代码排版好，，，，，，，
解决方案三：
是出现什么样的问题呀，把问题说一下
解决方案四：
var left=myimg.style.left
如果你是要获取css里面定义的left，上面的代码获取不到，不能获取style里面定义的，要用currentStyle(IE)或者getComputedStyle（标准浏览器）来获取