Javascriptの変更位置はChromeまたはIEでは機能しません

Question

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

また、これは私が教えてください何か間違ったことをやっているので、もしここに何かを求めて私の最初の時間です。

Answer 1

するvar catStyle =のdocument.getElementById（ '猫'）; catStyle.style.right = 0;

Answer 2

あなたが発見したように、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; 
 
}

<img src="http://placekitten.com/200/300" id="cat" onClick="move();">

Answer 3

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