BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] JSの要素移動

2022-03-09 22:14:54

質問

私はjavascriptを学んでいて、簡単な練習をしようとしています：私はテキストボックスを持っていて、キーボードでそれを制御したいです。 私のHTMLは次のとおりです（今のところ、私はちょうど1つの方向を試しています）。 

const myBox = document.querySelector("h1");
document.addEventListener('keydown', function (event){
    if (event.keyCode == '38'){
        myBox.style.top -= 5;
        console.log("test if it works");
    }
});

で、私のHTMLは 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tuto</title>

    <style>
        h1 {
            width: 200px;
            height: 40px;
            border: 5px solid #BADA55;
            color: #A28;
            margin: 0;
            text-align: center;
        }
    </style>
</head>
<body>

    <div><h1>My text</h1></div>

    <script type="text/javascript" src="main.js"></script>
</body>
</html>

コンソールログを使ったチェックテストはうまくいきました。イベントリスナーもそうです。 しかし、私のボックスは動きません。どのように私はそれを解決することができ、なぜ私の.style.topの使用は間違っているのですか？

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

解決方法は？

topの値を変更して要素を移動するには、要素の位置を固定（デフォルト）にしてはいけません。位置を absolute , relative , fixed etc... .

現在の top , left などを使用します。 Element#getBoundingClientRect これによって正しい初期値が得られ、文字列をパースする必要がなくなります。このため top は単位（px、emなど）を持つ必要があるため、そのために px を変更した top . 

const myBox = document.querySelector("h1");
document.addEventListener('keydown', function(event) {
  if (event.keyCode == '38') {
    myBox.style.top = myBox.getBoundingClientRect().top - 5 + 'px'; // parse the string to number, subtract 5, and add 'px'
    console.log(myBox.style.top);
  }
});

h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 40px;
  border: 5px solid #BADA55;
  color: #A28;
  margin: 0;
  text-align: center;
}

<div>
  <h1>My text</h1>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します