使用jQuery设置background-position时变量不生效，是否语法有误？

哦，我一眼就发现问题所在了——你在用变量拼接CSS值的时候，多套了一层不必要的单引号，导致浏览器无法识别这个无效的CSS属性值。

错误原因拆解 #

你正常生效的代码是：

$('.bg-img').css('background-position', '250px 50%');

这里传给css()方法的第二个参数是不带额外引号的有效字符串250px 50%。

但你写的无效代码里：

var x = $(div).position(); 
var posX; 
posX = parseInt(x.left); 
$('.bg-img').css("background-position", "'" + posX + "px 50%'");

最终生成的第二个参数是类似'120px 50%'的字符串（注意首尾的单引号），而CSS的background-position属性值根本不需要用引号包裹，浏览器会把这个带引号的内容判定为无效值，自然不会生效。另外这里的$(div)也少了引号，div会被当成变量而非选择器，这也是潜在问题哦。

修正后的代码 #

只需要去掉多余的单引号，同时给选择器加上引号就行：

var x = $('div').position();
var posX = parseInt(x.left, 10); // 加上基数10避免八进制解析问题
$('.bg-img').css("background-position", posX + "px 50%");

如果喜欢更简洁的写法，ES6模板字符串能让代码更清晰，也不容易出错：

const posX = parseInt($('div').position().left, 10);
$('.bg-img').css('background-position', `${posX}px 50%`);

额外小提示 #

• 用parseInt时最好加上第二个参数10，明确指定十进制解析，避免遇到以0开头的数值时被误判为八进制。
• 如果x.left本身就是整数类型，其实可以直接写x.left + 'px'，省去parseInt步骤，但用parseInt也能确保数值类型的安全性。

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