javascript - 获取特定的内联 CSS 样式和样式名称

Question

我正在寻找一种从元素中获取特定内联 css 样式的方法，包括样式名称本身和值。

我有一个包含不同内联样式的元素，就像这样。

<div style="background-color:red; display:block; background-size:cover; background-attachment:fixed; background-repeat:repeat-y; cursor:pointer; width:100%"></div>

我想获取该元素的样式(包括样式名称本身和值)，但只有那些与“背景”有关的样式，而忽略其他元素，如“显示、光标、宽度”等

因此，为了使用 jQuery 获取样式，我只需这样做

$("div").attr("style");

这将返回元素的所有样式，包括我不想要的样式。我正在寻找的解决方案会返回类似这样的内容，它会忽略与“背景-”无关的其他样式

background-color:red; background-size:cover; background-attachment:fixed; background-repeat:repeat-y;

我知道我可以得到这样的个人风格

$("div").css("background");
$("div").css("background-size");

问题是它只获取样式值，这是个问题，因为“背景”也可能是“背景图像”，或者“背景重复-y”也可能是“背景重复-x” ".

Answer 1

字符串操作是这项工作的错误工具，我很惊讶其他答案使用它。 style 元素是为此任务而设计的。

您可以通过查看 element.style 找到所有内联样式的列表。该对象看起来像这样:

您可以看到它包含的每条内联 CSS 规则彼此分开。这是一个非常简短的现场演示，它将此对象打印到控制台，以便您明白我的意思:

var el = document.getElementById("thediv");
console.log(el.style);

<div id="thediv" style="background-color:red; display:block; background-size:cover; background-attachment:fixed; background-repeat:repeat-y; cursor:pointer; width:100%"></div>

该对象包含一个可迭代的规则列表(例如 element.style[0] 是 background-color)，以及一个字典，以便您可以通过名称获取特定规则。然后您应该能够轻松地过滤此列表以获得您正在寻找的任何特定规则。

---

这是一个现场演示，它向您展示了如何获取其中包含字符串 background 的所有规则(打开控制台)。它将结果放入易于访问的名称和值对数组中:

var el = document.getElementById("thediv");

var result = [];

for (var i = 0; i < el.style.length; i++) {
    if (el.style[i].indexOf("background") !== -1) {
        result.push({name: el.style[i], value: el.style[el.style[i]]});
    }
}

console.log(result);

<div id="thediv" style="background-color:red; display:block; background-size:cover; background-attachment:fixed; background-repeat:repeat-y; cursor:pointer; width:100%"></div>