Unable to set div.style.left and div.style.top css properties via JavaScript

Question

I ran in a very confusing problem today I have a canvas, and a div, like this ```

``` I then set the properties of the div via a css file, e.g. position:absolute and display:none Then, i write the X/Y Position in the div via JS and try to set the properties of the div so that the div follows the mouse around, like this ``` 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"; ``` The funny thing now is: i can set the display and backgroundColor without a problem, but the left and top properties don't work. If i delete my DOCTYPE-declaration in my HTML file though, i can modify the left and top properties without any trouble. Working without doctype is out of the question of course. Am i doing something that shouldn't b…

Accepted Answer

You have forgotten "px":

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

You might also want to add `div.style.position = "absolute";`

If you think there's any chance that `e.pageX` or `e.pageY` will be strings rather than numbers, throw a `parseInt` in:

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

Unable to set div.style.left and div.style.top css properties via JavaScript

Solution

Problem