Không thể đặt div.style.left và div.style.top css tính qua JavaScript

Question

Tôi chạy vào một vấn đề rất khó hiểu ngày nay

Tôi có một canvas, và một div, như thế này

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

Sau đó tôi đặt thuộc tính của div qua tệp css, ví dụ: position: absolute và display: none Sau đó, tôi viết X/Y Vị trí trong div qua JS và cố gắng thiết lập các thuộc tính của div để các div sau con chuột xung quanh, như thế này

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

Các Điều thú vị bây giờ là: tôi có thể đặt màn hình và backgroundColor mà không có vấn đề gì, nhưng các thuộc tính bên trái và trên cùng không hoạt động. Nếu tôi xóa khai báo DOCTYPE của tôi trong tệp HTML của mình, tôi có thể sửa đổi các thuộc tính bên trái và trên cùng mà không gặp bất kỳ sự cố nào. Làm việc mà không có doctype là ra khỏi câu hỏi của khóa học. Tôi đang làm điều gì đó không nên làm hoặc thiếu điều gì đó hoàn toàn hiển nhiên?

Answer 1

Bạn đã quên "px":

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

Bạn cũng có thể muốn thêm div.style.position = "absolute";

Nếu bạn nghĩ rằng có bất kỳ cơ hội mà e.pageX hoặc e.pageY sẽ chuỗi chứ không phải là con số, ném một parseInt trong :

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

Answer 2

Phương pháp khác để đặt thuộc tính kiểu như đối tượng DIV đang sử dụng phương pháp setProperty

Bạn có thể kiểm tra dưới đây mẫu mã Javascript

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

Answer 3

Tôi cũng phải đối mặt với cùng một vấn đề, nhưng khi tôi thêm một không gian vào div trống rỗng, nó bắt đầu định vị đúng cách. tức là

div.innerHTML =