如何在document.write()的style中用JavaScript变量设置div的top值？

嘿，这个坑我踩过！问题根源其实很简单——你用了top作为变量名，但它是JavaScript的全局内置属性（对应window.top，指向当前窗口的最顶层父窗口），直接把它当自定义变量用会和内置属性冲突，导致你的数值没有被正确解析到样式里。

两种快速解决方法： #

• 方法1：换个变量名
  把top改成不会和内置属性冲突的名字，比如topPos、yCoordinate这类，代码就能正常运行了：

  const left = 200;
  const topPos = 100; // 替换变量名避开冲突
  
  document.write("<div style='position: absolute; left: " + left + "px; top: " + topPos + "px;'>" + " <h1 style='font-size:10px; color:blue;'> HELLO WORLD</h1></div>");
  

• 方法2：把变量放在局部作用域里
  如果一定要用top这个变量名，可以把代码包裹在一个自执行函数里，让变量成为局部变量，避免和全局的window.top冲突：

  (function() {
    const left = 200;
    const top = 100; // 局部变量不会和全局属性冲突
  
    document.write("<div style='position: absolute; left: " + left + "px; top: " + top + "px;'>" + " <h1 style='font-size:10px; color:blue;'> HELLO WORLD</h1></div>");
  })();
  

额外小建议： #

其实现代前端开发里不太推荐使用document.write，因为如果在DOM加载完成后调用它，会直接覆盖整个页面的内容。更稳妥的方式是用DOM API来创建元素，比如：

const left = 200;
const topPos = 100;

// 创建div元素并设置样式
const containerDiv = document.createElement('div');
containerDiv.style.position = 'absolute';
containerDiv.style.left = `${left}px`;
containerDiv.style.top = `${topPos}px`;

// 创建h1元素并设置样式和内容
const title = document.createElement('h1');
title.style.fontSize = '10px';
title.style.color = 'blue';
title.textContent = 'HELLO WORLD';

// 把h1添加到div，再把div添加到页面
containerDiv.appendChild(title);
document.body.appendChild(containerDiv);

内容的提问来源于stack exchange，提问作者MD. Noor Uddin