繁体   English   中英

jQuery-在.css()方法中合并变量和字符串

[英]jQuery - Combine variables and strings inside .css() method

如何在jQuery的.css()方法中将字符串和变量作为属性组合?

如果设置background-position-xbackground-position-y我可以轻松实现,但是Firefox和Opera不支持它们。

function bgPos() {
    jq('element').each(function() {
        var bgPosX = 10;
        var bgPosY = 20;
        jq(this).css("background-position", "bgPosX + 'px', bgPosY + 'px'");
    });
}

此处的其他答案是错误的,因为jQuery的css()方法不支持3个参数,它们将导致bgPosY值被完全忽略(默认为50% )。 我实际上不确定他们中的一位是如何收到多次投票的...


您在这里有两个选择:

字符串串联

您可以使用+符号将两个变量连接为一个字符串:

.css({ backgroundPosition: bgPosX + "px " + byPosY + "px" })

请注意,我如何删除pxbgPosY之间的逗号,并添加了一个空格来分隔两者: "px "

设定个别属性

或者,您可以只设置单个backgroundPositionXbackgroundPositionY属性:

编辑:正如Blazemonger在此评论中指出的那样,Firefox不支持这些单独的属性,因此,如果您希望支持Firefox,则应使用第一个选项。)

.css({
    backgroundPositionX: bgPosX,
    backgroundPositionY: bgPosY
})

值得一提的是,我在这里使用对象表示法而不是使用字符串,仅仅是因为我发现它比较整洁。 如果愿意,您可以坚持将"background-position"用于第一个示例,并将"background-position-x""background-position-y"用于第二个示例。

.css不接受3参数,因此您可以通过提供一个对象来实现所需的目标。

像吼叫

jq(this).css({ backgroundPosition: bgPosX + "px " + byPosY + "px" });

删除变量周围的引号:

jq(this).css("background-position", bgPosX + 'px' + bgPosY + 'px');

并摆脱第二个逗号...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM