ボタンを押したときに<img>を移動します。

ここでは、私が現在機能に使用しているコードです。imgは過去にキーコードを使用して移動しましたが、私のために移動するために関数を使用しました。、あなたのmove機能でボタンを押したときに<img>を移動します。

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Return To Alnerwick</title> 
      <style> 
       body 
       { 
        background-image: url("https://s-media-cache-ak0.pinimg.com/736x/e8/d6/fc/e8d6fc15671a05eeaf592f85c6dbb2db.jpg"); 
        background-size: 1500px 1000px; 
        background-repeat: no-repeat; 
       } 

       img 
       { 
        position:absolute; 
        TOP:650px; 
        LEFT:750px; 
        width:100px; 
        height:100px 
       } 
      </style> 
      <script> 
       function move() { 
        var element = document.getElementById("char"); 
        element.style.left = parseInt(element.style.left) - 90 + 'px'; 
       } 
      </script> 
     </head> 
     <body> 
      <img id="char"src="/New Piskel (5).gif"> 
      <button onclick="move();">move</button> 
     </body> 
    </html>

出典

2017-02-07 Jack S.

移動スクリプトタグになりますので

2）、あなたの代わりにelement.style.leftの

element.getBoundingClientRect().left;

を行くだろう（標準的なベストプラクティス） 'のすぐ下まで – daniel0mullins

@ daniel0mullinsそれでもまだ動作しません –

idとsrc属性の間にスペースがないように見えます...私はこれをフィドルに入れてみます何が間違っているのか正確に見てください。 – daniel0mullins

スタイルシートを使用しているからです。スタイルシートを使用するときは、計算されたスタイルを取得しています

function move() { 
    var element = document.getElementById("char"); 
    var style = window.getComputedStyle(element); 
    console.log("Current value: " + style.left); 
    element.style.left = (parseInt(style.left) - 90) + 'px'; 
}

は、作業フィドルを参照してください：https://jsfiddle.net/vgb7tc03/1/

またgetComputedStyle参照：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

出典

2017-02-07 22:24:21 daniel0mullins

ありがとうございました –

あなたがelement.style.leftを参照している：それはそこにちょうど愚かな誤りがある可能性があり動作するはずです。これは要素のインラインスタイルプロパティです。そのインラインスタイルのプロパティは、マークアップではまったく定義されていません。

あなたのCSS（インラインではない）にLEFTプロパティを定義しています。あなたがする必要があるのは、あなたの関数のLEFT CSSプロパティを参照するか、またはCSSの代わりに要素内のleftプロパティをインラインに設定することです。

出典

2017-02-07 22:23:08

あなたの問題はelement.style.leftがないということですその位置を返す。解決策のいくつかあります。

1）あなたがちょうどあなたのスクリプトタグの冒頭で

var img_left=750;

を移動して行くことができますので、あなたのイメージがすでに左から750pxであることを知っている

img_left=img_left-90; 
element.style.left = img_left + "px";

あなたの機能では

です。あなたは要素の位置を取得したい場合は、全体のラインが

element.style.left=(element.getBoundingClientRect().left-90)+"px";

出典

2017-02-07 22:26:11 CodeCabin

解決策2はより良いオプションです – daniel0mullins

ボタンを押したときに<img>を移動します。

答えて

関連する問題