为何style属性未添加至img元素？JS设置样式不显示问题

核心原因 #

• img默认是行内替换元素，left、top这类CSS定位属性仅对position值不为static（即relative/absolute/fixed/sticky）的元素生效。
• 设置left/top时必须添加单位（如px），否则浏览器无法识别数值，不会应用样式。

修复方案 #

方案1：JS中动态添加定位与单位 #

修改后的JavaScript代码：

function moveBall(event){
    let x = event.clientX;
    let y = event.clientY;
    let ball = document.getElementById('ball');
    // 开启定位，让left/top属性生效
    ball.style.position = 'absolute';
    // 为坐标添加px单位
    ball.style.left = `${x}px`;
    ball.style.top = `${y}px`;
}

let field = document.getElementById('field');
field.onclick = moveBall;

方案2：CSS预先定义定位 #

如果希望img默认支持定位，可在CSS中提前设置：

#ball {
    position: absolute;
}

对应的JS只需补充单位：

function moveBall(event){
    let x = event.clientX;
    let y = event.clientY;
    let ball = document.getElementById('ball');
    ball.style.left = `${x}px`;
    ball.style.top = `${y}px`;
}

let field = document.getElementById('field');
field.onclick = moveBall;

进阶优化：相对父元素定位 #

若要让球相对于#field（而非整个页面）定位，给父元素添加相对定位：

#field {
    position: relative;
    width: 800px;
    height: 600px;
    border: 1px solid #ccc; /* 可视化点击区域 */
}

#ball {
    position: absolute;
}

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