No se puede establecer propiedades div.style.left y css div.style.top a través de JavaScript

Question

me encontré en un problema muy confuso hoy

Tengo un lienzo y un div, como este

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

Luego establezco las propiedades de div a través de un archivo CSS, por ejemplo position: absolute y display: none Entonces, escribo la Posición X/Y en el div través de JS y tratar de establecer las propiedades de la div de modo que el div sigue el ratón alrededor, como este

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"; 

El Lo gracioso ahora es: puedo configurar la pantalla y backgroundColor sin ningún problema, pero las propiedades izquierda y superior no funcionan. Sin embargo, si elimino mi declaración DOCTYPE en mi archivo HTML, puedo modificar las propiedades izquierda y superior sin ningún problema. Trabajar sin doctype está fuera de cuestión, por supuesto. ¿Estoy haciendo algo que no debería hacerse o me falta algo completamente obvio?

Answer 1

Se ha olvidado "px":

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

Usted también puede añadir div.style.position = "absolute";

Si cree que hay alguna posibilidad de que e.pageX o e.pageY habrá cadenas en lugar de números, lanzar una parseInt en :

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

Answer 2

Otro método para establecer propiedades de estilo como objetos DIV es usar el método setProperty

Se puede comprobar a continuación Javascript ejemplo de código

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

Answer 3

también me enfrenté mismo problema, pero cuando he añadido un espacio en el div vacío, que comenzó el posicionamiento apropiado. es decir,

div.innerHTML =