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

【问题标题】：Unable to set div.style.left and div.style.top css properties via JavaScript无法通过 JavaScript 设置 div.style.left 和 div.style.top css 属性
【发布时间】：2012-05-08 05:46:32
【问题描述】：

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

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

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

然后我通过 css 文件设置 div 的属性，例如位置：绝对和显示：无然后，我通过 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 的工作当然是不可能的。我是在做不应该做的事情，还是遗漏了一些完全明显的事情？

【问题讨论】：

该代码中的“e”是什么？ edit 哦，那是一个事件处理程序。

标签： javascript css html css-position

【解决方案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';

【讨论】：

+1，但您的parseInt 是不必要的，或者如果需要，结尾的) 位置错误。我相信e.pageX 已经是一个数字，但如果有可能不是，你想要= (parseInt(e.pageX, 10) + 25) + 'px';（注意我也把基数放在上面。你几乎总是想告诉parseInt 具体使用什么基数。 )
是的，但是因为它是一个串联的字符串，所以更安全。我个人更喜欢:)。（好吧，基数，我现在就用 :)）
我的意思是，那里的东西确实是错误的，而不是不理想。如果 e.pageX 是一个字符串（比如"10"），那么parseInt(e.pageX + 25) 将是1025，而不是35，因为当您将一个数字添加到一个字符串时，该数字是转换为文本并附加：jsbin.com/ekiwup
就是这样。我的头刚刚高速碰到我的桌子。非常感谢；）我已经尝试过的是+'px'，但其中不能有''，我刚刚意识到
甚至不需要 parseInt，它只适用于 (e.pageX + 25) + 'px'

【解决方案2】：

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

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

document.getElementById('div').style.setProperty("top","100px");

【讨论】：

【解决方案3】：

我也遇到了同样的问题，但是当我在空 div 中添加一个空格时，它开始正确定位。即

div.innerHTML = &nbsp;&nbsp;

【讨论】：