[英]jQuery - Combine variables and strings inside .css() method
如何在jQuery的.css()
方法中将字符串和变量作为属性组合?
如果设置background-position-x
和background-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" })
请注意,我如何删除px
和bgPosY
之间的逗号,并添加了一个空格来分隔两者: "px "
。
或者,您可以只设置单个backgroundPositionX
和backgroundPositionY
属性:
( 编辑:正如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.