Javascript改变位置赢得'不适用于Chrome或IE

Javascript changing position won't work on Chrome or IE

本文关键字：适用于 不适用 Chrome IE 位置 改变 Javascript      更新时间：2023-09-26

通过javascript更改位置在Firefox中有效，但在Chrome或IE中无效。

<script language="javascript">
function move (){
  document.cat.style.right=0;
}
</script>
<img src="cat.gif" id="cat" style="position:absolute; right:500; top:500" onClick="move ();">

此外，这是我第一次在这里提问，所以如果我做错了什么，请告诉我。

var catStyle=document.getElementById（'cat'）；catStyle.style.right=0；

<img    
  src="cat.gif" 
  id="cat" 
  style="position:absolute; right:500px; top:500px;" 
  onClick="move ();"
>
<script>
   function move (){
     document.getElementById('cat').style.right="0px";
   }
</script>

在你的风格中使用单元有助于JavaScript的启动。你可以使用getElementById或querySelector来获取你的DOM元素。

以下是JSFiddle，它为您提供了一个可以使用您提供的示例的空间：https://jsfiddle.net/8a2drg7p/1/

正如您所发现的，只有Firefox才支持使用document.<id>。最好使用document.getElementById('cat')

此外，除非绝对必要，否则尽量避免使用style属性。最好的做法是将所有CSS都放在style标记中，或者最好是包含一个样式表。此外，您的right和left属性缺少单位——请始终确保所有数字都有一个单位。我假设在这种情况下，你打算使用像素。

这应该是你所期望的（为了说明的目的，我更改了图像的URL）：

function move (){
    document.getElementById('cat').style.right=0;
}
#cat {
    position:absolute;
    right:500px;
    top:500px;
}
<img src="http://placekitten.com/200/300" id="cat" onClick="move();">

相关文章：