10

今日は非常に紛らわしい問題に遭遇しました

このようなキャンバスとdivがあります

<canvas id="canvas" width="800" height="400"></canvas>
<div id="xy"></div>

次に、css ファイルを介して div のプロパティを設定します。例: position:absolute および display:none 次に、JS を介して div に X/Y 位置を書き込み、div が次のようになるように div のプロパティを設定しようとします。このようにマウスを動かします

var div = document.getElementById("xy");
var x = e.pageX - this.offsetLeft - 1;
var y = e.pageY - this.offsetTop - y0 - 0.5;
div.style.display = "block";
div.style.left = e.pageX + 25;
div.style.top = e.pageY -10;
div.style.backgroundColor = "#f00";

面白いことに、display と backgroundColor は問題なく設定できますが、left プロパティと top プロパティは機能しません。ただし、HTML ファイルで DOCTYPE 宣言を削除すると、左と上のプロパティを問題なく変更できます。もちろん、Doctypeなしで作業することは問題外です。してはいけないことをしているのですか、それとも完全に明らかな何かを見逃していますか?

4

3 に答える 3

12

「px」を忘れました：

div.style.left = (e.pageX + 25) + 'px';
div.style.top = (e.pageY -10) + 'px';

追加することもできますdiv.style.position = "absolute";

e.pageXまたはe.pageYが数値ではなく文字列になる可能性があると思われる場合は、次のようにスローparseIntします。

div.style.left = (parseInt(e.pageX, 10) + 25) + 'px';
div.style.top = (parseInt(e.pageY, 10) - 10) + 'px';
于 2012-04-27T13:15:37.833 に答える
0

DIV オブジェクトなどのスタイル プロパティを設定する別の方法は、setProperty メソッドを使用することです。

以下のJavascriptコードサンプルを確認できます

document.getElementById('div').style.setProperty("top","100px");
于 2016-02-24T16:22:33.337 に答える