无法通过JavaScript设置div.style.left和div.style.top css属性

Question

我今天遇到了一个非常混乱的问题

我有一个画布和一个div,就像这样

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

绝对显示:然后,我通过一个CSS文件,例如位置设置div的性质没有的话,我写在通过JS股利的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";

现在有趣的是:我可以设置显示和backgroundColor没有问题,但左侧和顶部属性不起作用.如果我删除了我的HTML文件中的DOCTYPE声明,我可以毫不费力地修改左侧和顶部属性.没有doctype的工作当然是不可能的.我做的事情不应该做或缺少一些完全明显的东西？

Answer 1

你忘记了"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';