如何为querySelector获取的const元素设置随机top/left样式？starLoc报错排查

错误原因分析 #

你碰到的Uncaught TypeError: Cannot read properties of undefined (reading 'style')问题，核心原因很明确：

• 页面刚加载时，.star-obj元素根本不存在——它们是在starMove函数里动态生成的，所以初始化时document.querySelectorAll('.star-obj')拿到的是空集合。
• 循环里访问starLoc[i]自然得不到有效元素，也就没法读取style属性，直接抛出错误。

修正代码与随机位置实现 #

方案1：创建元素时直接设置样式（推荐） #

不用提前获取元素，动态创建单个星星后立刻设置随机位置，性能更优：

const btn = document.getElementById('btn');
const star = document.querySelector('.space');

function startSpacing(){
    btn.style.display = 'none';
    starMove();
}

function starMove(){
    for(var i = 0; i <= 60; i++){
        // 创建星星元素
        const starObj = document.createElement('div');
        starObj.className = 'star-obj';
        starObj.textContent = '*';
        // 生成当前星星的随机坐标
        const rndLeft = Math.floor(Math.random() * 1000);
        const rndTop = Math.floor(Math.random() * 1000);
        // 设置位置样式
        starObj.style.left = `${rndLeft}px`;
        starObj.style.top = `${rndTop}px`;
        // 把星星添加到容器里
        star.appendChild(starObj);
    }
}

方案2：批量创建后统一设置样式 #

如果坚持先创建所有元素再调整样式，必须在创建完成后重新获取元素集合：

const btn = document.getElementById('btn');
const star = document.querySelector('.space');

function startSpacing(){
    btn.style.display = 'none';
    starMove();
}

function starMove(){
    // 先批量生成所有星星元素
    for(var i = 0; i <= 60; i++){
        star.innerHTML += '<div class="star-obj">*</div>';
    }
    // 现在才能获取到所有已生成的星星
    const starLoc = document.querySelectorAll('.star-obj');
    // 遍历给每个星星设置随机位置
    starLoc.forEach(item => {
        const rndLeft = Math.floor(Math.random() * 1000);
        const rndTop = Math.floor(Math.random() * 1000);
        item.style.left = `${rndLeft}px`;
        item.style.top = `${rndTop}px`;
    });
}

关键注意事项 #

• 要让left和top样式生效，必须给.star-obj设置定位方式，建议在CSS里添加：

.star-obj {
    position: absolute;
}
.space {
    position: relative; /* 如果星星要相对于容器定位，给容器加相对定位 */
}

• 方案1比方案2性能更好，因为innerHTML +=会重复解析DOM，而createElement是更高效的动态创建元素方式。

内容的提问来源于stack exchange，提问作者Arsen Mkrtumian