Question

我有一个像：

这样的元素

<div style="background-color: #ffffff; background-image: url(image.jpg);></div>

正在使用jquery设置背景属性，如下所示：

$('div').css('background-color', '#ffffff');

一旦设置了各种属性，我想把它们全部作为速记声明。我希望这样做：

var background = $('div').css('background');

会起作用，但它似乎没有。

有人解决了这个问题吗？

我唯一能想到的就是进行字符串连接，例如：

var background = $('div').css('background-color') + ' ' + $('div').css('background-image');

然而，这将是非常混乱的并且需要大量检查，因为并非所有背景变量都被设置，例如位置等。

任何想法如何做到这一点将不胜感激！

Answer 1

您可以将数组传递给.css()方法，它会返回一个数组对象，其中包含您要求的所有属性的值。

var backgroundStuff = [
  "background-color",
  "background-position",
  "background-repeat",
  // ...
];

var props = $(whatever).css( backgroundStuff );
alert(props["background-color"]); // whatever the background color is

这是一个相当新的功能（版本1.9）。

Answer 2

由于看起来似乎没有可靠的跨浏览器解决方案，我已经做了以下事情来解决这个问题。

我设置了一个像这样的对象：

var backgroundDefaults = {
    color: "#ffffff",
    image: "none",
    repeat: "repeat",
    position: "top left"
}

当用户更改一个背景属性（例如背景颜色）时，我使用该对象设置元素上的所有默认值。通过这样做，它确保始终设置所有可以更改的值，因此我可以使用以下方法可靠地将它们从元素中删除：

var background = $('div').css('background-color') + ' ' + $('div').css('background-image');

如原始问题中所述。

Answer 3

要与Pointy回答混合，您可以在style属性上使用regexp，如下所示：

var attr = $('div').attr('style')
var theRegExp = (attr.match(/(?![\s;])*(background[\-a-z]*)/g)); //Will give an array of backgrounds properties

console.log($('div').css(Array.prototype.slice.call(theRegExp))) //Will give an object of properties

小提琴：http://jsfiddle.net/hLdZH/

使用javascript / jquery获取所有背景属性

3 个答案: