jquery - 设置 .css() 多个属性不起作用

Question

我试图通过更改 div 背景图像属性来放大图像的一部分。我不确定这是否是正确的方法，但到目前为止它有效!唯一的问题是通过 .css() 传递多个属性。当我单独调用它们而不是一起调用时，这些属性有效!你能告诉我为什么这段代码不起作用吗？

$(document).ready(function () {
    $(".zoom").click(function () {
        $('.gal').css({
            background-size: "200% 200%",
            background-position: "center"
        });
    });
});

创建 Google map 样式图像放大有什么更好的主意吗？ 谢谢

Answer 1

改变

$('.gal').css({
  background-size: "200% 200%",
  background-position : "center"
});

DOM 属性符号:

$('.gal').css({
  backgroundSize: "200% 200%",
  backgroundPosition : "center"
});

或在 CSS 属性名称周围添加引号:

$('.gal').css({
  'background-size': "200% 200%",
  'background-position' : "center"
});

参见 documentation :

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) and .css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'}). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.