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

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

我有一个包含不同内联样式的元素，如下所示

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

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

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

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

---

问题是它只获取样式值，这是一个问题，因为“background”也可以是“background image”，或者“background-repeat-y”也可以是“background-repeat-x”。

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

通过查看

元素.style

，可以找到所有内联样式的列表。该对象如下所示：

$('div').each(function() {

style_arr=$(this).attr("style").split(';');
for(i=0;i<style_arr.length;i++) {
    if(style_arr[i].indexOf('background')!=-1) {
        console.log(style_arr[i]);
    }
}

});

var style = $("div").attr("style");
var arrayStyle = style.split(';');
var backgroundStyles = '';
for (i = 0; i < arrayStyle.length; ++i) {
    if (arrayStyle[i].indexOf("background") >= 0) {
        backgroundStyles+=arrayStyle[i]+';';
    }
}   
console.log(backgroundStyles);

您可以看到它包含每个相互独立的内联CSS规则。下面是一个非常简短的实时演示，它将此对象打印到控制台，以便您可以了解我的意思：

var el=document.getElementById（“thediv”）；
控制台日志（el.style）
您可以执行以下操作：

$('div').each(function() {

style_arr=$(this).attr("style").split(';');
for(i=0;i<style_arr.length;i++) {
    if(style_arr[i].indexOf('background')!=-1) {
        console.log(style_arr[i]);
    }
}

});

var style = $("div").attr("style");
var arrayStyle = style.split(';');
var backgroundStyles = '';
for (i = 0; i < arrayStyle.length; ++i) {
    if (arrayStyle[i].indexOf("background") >= 0) {
        backgroundStyles+=arrayStyle[i]+';';
    }
}   
console.log(backgroundStyles);

$（'div'）。每个（函数（）{
style_arr=$（this.attr（“style”）.split（“；”）；
对于（i=0；i我将执行以下操作：

$(document).ready(function(){
    var filteredStyles = $.grep($("div").attr("style").split(';'), function(style) {
        return style.indexOf("background") > -1;
    });
    console.log(filteredStyles);
});

您可以这样做：

$('div').each(function() {

style_arr=$(this).attr("style").split(';');
for(i=0;i<style_arr.length;i++) {
    if(style_arr[i].indexOf('background')!=-1) {
        console.log(style_arr[i]);
    }
}

});

var style = $("div").attr("style");
var arrayStyle = style.split(';');
var backgroundStyles = '';
for (i = 0; i < arrayStyle.length; ++i) {
    if (arrayStyle[i].indexOf("background") >= 0) {
        backgroundStyles+=arrayStyle[i]+';';
    }
}   
console.log(backgroundStyles);

var style=$（“div”）.attr（“style”）；
var arrayStyle=style.split（“；”）；
var backgroundStyles=''；
对于（i=0；i=0）{
背景样式+=阵列样式[i]+'；'；
}
}   
控制台日志（背景样式）；

首先，您可以获得整个样式属性，
然后将所有CSS属性按“；”拆分为一个数组，最后对数组中的每个键查找包含“背景”的值。如果是这样，只需将该值合并到一个变量中，在每个值的末尾添加“；”。
这似乎是一个很好的解决方案，我将添加“背景-”样式设置为一个单独的元素，那么我如何在返回的值中保留（分号）；？如果可以，为什么不可以？：）我认为从
样式
对象获取规则可能比依赖字符串操作更可靠，对吗？如果直接访问样式对象是不可能的，这个答案会打破这种情况。@MaximillianLaumeister，我想是的……但是，如果属性在样式属性内，这也应该有效（它们是）、HTML（内联样式）和OP使用JQuery（他使用它）…我看不出这里有什么大问题…@在大多数情况下都应该如此。我只是觉得我的答案更可靠，因为它使用浏览器的内置解析而不是字符串操作。我的答案在任何边缘情况下都不会失败，因为所有边缘情况都已经由浏览器的解析引擎处理。其他解决方案工作正常，但这一个忽略了内联样式中的任何错误空格，这很好。对于使用字符串操作的解决方案，如果您有
背景色：红色；
，那么您可能需要
.trim（）
之类的内联样式。这是您提到的可能的边缘情况之一吗？我不确定在（荒谬的）像这样的案例任何事情都可能奏效