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

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

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 be done or missing something completely obvious?

Mcfarlane

What's "e" in that code? edit oh that's an event handler. – Lanilaniard

Answer 1

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

Barnet

+1, but your parseInt is unnecessary or, if required, has the ending ) in the wrong place. I believe e.pageX is already a number, but if there's any chance it isn't, you want = (parseInt(e.pageX, 10) + 25) + 'px'; (Note I also put the radix on it. You almost always want to tell parseInt specifically what radix to use.) – Cath

yes, but as it is a concatenated string it's more secure. I personally prefer :). (alright for the radix, I will use now :)) – Barnet

My point is that what's there is actively wrong, not that it's not ideal. If e.pageX is a string (say, "10"), then parseInt(e.pageX + 25) will be 1025, not 35, because when you add a number to a string, the number is converted to text and appended: jsbin.com/ekiwup – Cath

that was just it. my head just met my desk at a high velocity. thank you very much ;) what i already had tried was + ' px', but there mustn't be a ' ' in it, i realized just now – Mcfarlane

the parseInt isn't even necessary, it works with just (e.pageX + 25) + 'px' – Mcfarlane

@RamonWenger: Yeah, that's what I said up above. pageX and pageY are already numbers. – Cath

Answer 2

Another method for setting style properties like DIV objects is using the setProperty method

You can check below Javascript code sample

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

Aldwon

Answer 3

I also faced same problem, but when I added a space into the empty div, it started positioning properly. i.e.

div.innerHTML =   

Twill