jQuery：如何向.css({})传递变量？解决语法缺失大括号错误

安全阿岳

2026-5-25

解决jQuery.css()方法传入变量的语法错误问题

嘿，这个问题我太熟悉啦！你遇到的SyntaxError: missing } after property list错误，根源是字符串拼接的语法错误——你在写transform属性值的时候，没有正确把变量vscroll和字符串片段连接起来，导致JS解析器无法正确识别代码结构。

错误原因拆解

原来的代码里，这一行的写法有问题：

"transform": "translate(0px, "vscroll/2+"px)"

这里的引号嵌套混乱，JS会把"translate(0px, "当成一个字符串，后面的vscroll/2+"px"就变成了无意义的代码片段，直接打乱了整个CSS对象的结构，所以才报了“缺少}”的错误。

正确的两种写法

方法1：传统字符串拼接

用+号把变量和字符串片段正确连接，同时注意引号的匹配（外面用双引号时，里面的字符串可以用单引号，或者反过来避免冲突）：

<script type="text/javascript">
jQuery(window).scroll(function(){
    var vscroll = jQuery(this).scrollTop();
    jQuery('#logotext').css({
        "transform": "translate(0px, " + vscroll/2 + "px)"
    });
});
</script>

这里vscroll/2会被计算成具体的数值，再和前后的字符串拼接成完整的transform属性值，JS就能正确解析了。

方法2：ES6模板字符串（更简洁）

如果你项目支持ES6语法，可以用反引号`包裹字符串，变量放在${}里，写法更直观，也不容易出错：

<script type="text/javascript">
jQuery(window).scroll(function(){
    var vscroll = jQuery(this).scrollTop();
    jQuery('#logotext').css({
        "transform": `translate(0px, ${vscroll/2}px)`
    });
});
</script>