如何在HTML内联Style标签中使用变量实现图片随机定位

你的问题出在字符串里的变量没有被解析——单引号包裹的内容中，randomXValue和randomYValue会被当成普通文本，而非变量的实际值，导致样式里的left和top是无效的字符串，无法生效。

下面是三种可行的解决方式：

1. 字符串拼接 #

把变量从字符串中拆分出来，用+连接变量与字符串片段：

randomXValue = getRandomXValue();
randomYValue = getRandomYValue();

$("#gamespace").append(
    '<img src="img/img.jpg" class="gameimg" style="left: ' + randomXValue + 'px; top: ' + randomYValue + 'px;"/>'
);

2. ES6模板字符串（推荐） #

用反引号``包裹字符串，变量直接通过${变量名}嵌入，写法简洁直观：

randomXValue = getRandomXValue();
randomYValue = getRandomYValue();

$("#gamespace").append(`
    <img src="img/img.jpg" class="gameimg" style="left: ${randomXValue}px; top: ${randomYValue}px;"/>
`);

3. jQuery创建元素并设置样式 #

直接用jQuery API创建元素，单独设置样式属性，避免字符串拼接的繁琐：

randomXValue = getRandomXValue();
randomYValue = getRandomYValue();

const $gameImg = $('<img>', {
    src: 'img/img.jpg',
    class: 'gameimg'
}).css({
    left: randomXValue + 'px',
    top: randomYValue + 'px'
});

$("#gamespace").append($gameImg);

以上三种方法都能让left和top正确获取随机函数返回的数值，实现图片在容器内的随机位置显示。

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