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 声明，我可以毫无问题地修改 left 和 top 属性。没有 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 中添加一个空格时，它开始正确定位。IE

div.innerHTML = &nbsp;&nbsp;
于 2016-03-08T05:55:07.507 回答
0

另一种设置样式属性（如 DIV 对象）的方法是使用 setProperty 方法

您可以查看下面的 Javascript 代码示例

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