Javascript 更改位置不适用于 Chrome 或 IE答案

【问题标题】：Javascript changing position won't work on Chrome or IEJavascript 更改位置不适用于 Chrome 或 IE
【发布时间】：2016-04-19 18:04:20
【问题描述】：

通过 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 ();">

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

【问题讨论】：

标签： javascript google-chrome position css-position

【解决方案1】：

var catStyle = document.getElementById('cat'); catStyle.style.right=0;

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如您所见，使用 document.<id> 仅在 Firefox 中受支持。最好使用document.getElementById('cat')

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

这应该符合您的预期（我更改了图片的 URL 以进行说明）：

function move (){
    document.getElementById('cat').style.right=0;
}

#cat {
    position:absolute;
    right:500px;
    top:500px;
}

&lt;img src="http://placekitten.com/200/300" id="cat" onClick="move();"&gt;

【讨论】：