求助：用JavaScript实现CSS左侧随机定位失效问题

核心原因 #

你生成的随机数没有添加CSS长度单位**px**，浏览器无法解析纯数字的left属性值，导致位置设置无效。而固定值（如100px）因为带了单位，所以能正常生效。

修正后的JavaScript代码 #

function pos() {
    var title = document.getElementById("text1");
    // 注：原代码逻辑生成的是200-499的随机整数，若需200-300需调整，见下文说明
    var pos2 = Math.floor(Math.random() * 300) + 200;
    // 关键：给数值添加px单位
    title.setAttribute("style", "color: red; position: relative; left:" + pos2 + "px;");
    console.log(pos2);
}

优化写法推荐 #

直接操作元素的style属性对象，比setAttribute更直观且不易出错：

function pos() {
    var title = document.getElementById("text1");
    var pos2 = Math.floor(Math.random() * 300) + 200;
    title.style.color = "red";
    title.style.position = "relative";
    title.style.left = `${pos2}px`; // 使用模板字符串更简洁
    console.log(pos2);
}

数值范围修正说明 #

原代码注释标注“200 to 300”有误，当前逻辑生成的是200-499的整数。如果需要严格生成200-300（包含两端）的随机数，代码应改为：

// 生成200 ≤ 随机数 ≤ 300
var pos2 = Math.floor(Math.random() * 101) + 200;

内容的提问来源于stack exchange，提问作者maslori production