如何在document.write（）中使用樣式標記內的javascript變量定位div

Question

我正在嘗試在指定位置使用javascript document.write（）創建一個div。

這給出了正確的答案

document.write("<div style='position: absolute; left:200px; top:100px;'<h1 style='font-size:10px; color:blue;'> HELLO WORLD<h1></div>");

但是每當我在頂部和左側使用javascript變量時，左側都會給出正確的位置，但頂部不會

document.write("<div style='position: absolute; left: " + left + "px; top: " + top + "px;'>" + "    <h1 style='font-size:10px; color:blue;'> HELLO WORLD<h1></div>"); 

如何在頂部使用javascript變量？

Answer 1

因為top等同於window.top ...請使用其他變量名稱，或將代碼包含在函數或IIFE中。

–由Jaromanda X回答

Answer 2

請將您的變量名top更改為其他名稱，例如top2等。

頂部是JavaScript中的Windoww對象。

這是顯示它的示例。

var top = 100;  // not ok (it's Window Object)
var top2 = 100; // ok
var left = 200; // ok

/* top */
console.log(alert("<div style='position: absolute; left:" + top +"px; top:" + left + "px;'> <h1 style='font-size:10px; color:blue;'> HELLO WORLD </h1></div>"));
// <div style='position: absolute; left:[object Window]px; top:200px;'> <h1 style='font-size:10px; color:blue;'> HELLO WORLD </h1></div>


/* top2 */
<div style='position: absolute; left:[object Window]px; top:200px;'> <h1 style='font-size:10px; color:blue;'> HELLO WORLD </h1></div>
// <div style='position: absolute; left:100px; top:200px;'> <h1 style='font-size:10px; color:blue;'> HELLO WORLD </h1></div