使用Javascript从字符串中提取CSS属性

如何从字符串内的CSS样式表中提取属性和值

示例：

var strCSS = ".box{background: red; color: white;}";

我如何从上面的行中提取“background”属性的值

---

我想在复杂的CSS样式表中使用它。

在JavaScript中获取CSS值相对简单：

console.log( document.getElementById("foo").style.background );

如果必须从字符串中提取它，那么我建议如下：

// Split CSS string into each individual property
strCSS = strCSS.split(";");

// For each property/value pair...
for (var i = 0; i < strCSS.length; i++) {

    // Split into property and value
    strCSS[i] = strCSS[i].split(":");

    // Get background value
    if (strCSS[i][0] == "background") {
        return strCSS[i][1];
    }
}

//将CSS字符串拆分为每个单独的属性
strCSS=strCSS.split（“；”）；
//对于每个属性/值对。。。
对于（变量i=0；i

---

这应该行得通。

虽然有点神秘，但正则表达式是一种可能的方法：

var match = strCSS.match(/background:\s*([^;}]*)/)
var background = match[1]

还是作为一个班轮

var background = strCSS.replace(/^.*background:\s*([^;}]*)[;}].*$/, '$1')

或使用动态设置的属性名称

var propName = 'background';
var propRegex = new RegExp('^.*' + propName + ':\\s*([^;}]*)[;}].*$');
var propVal = strCSS.replace(propRegex, '$1')

使用，您可以获得值，而不必使用糟糕的正则表达式和挑剔的字符串操作：

var strCSS='.box{背景：红色；颜色：白色；}'；
函数getValue（css、选择器、属性）{
var style=document.createElement（'style'）；
appendChild（document.createTextNode（css））；
document.body.appendChild（样式）；
var sheet=style.sheet；
style.remove（）；
var规则=数组
.自（第cssRules页）
.find（cssRule=>cssRule.selectorText==选择器）；
如果（规则）{
返回规则.style.getPropertyValue（属性）；
}
}
log（getValue（strcs，.box，.background'）
.box{背景：红色；颜色：白色；}
下面是一个不使用正则表达式的简单解决方案：


const extractProperties=函数extractProperties（str）{
返回str
.substring（strCSS.indexOf（'{'）+1，strCSS.indexOf（'}'））
.split（“；”）
.map（（el）=>el.substring（0，el.indexOf（'：'））.trim（）
.过滤器（布尔值）；
};
const strCSS=“.box:hover{背景：红色；颜色：白色；变换：翻译（50%，50%）；字体系列：arial}”；
日志（提取属性（strCSS））我想他是在问如何从css文件中提取css，顺便说一句，不需要
中断在
返回之后
。您错过了一个结束语
}
。您必须在原始
strcs
中
{
和
}
之间的字符串上运行该片段-我忘了澄清这一点。如果您不必将“background”硬编码到正则表达式中，我会喜欢您的解决方案，如果你能得到所有的属性，它也会更有用。对于问题当前的“措辞”，我的答案是唯一正确的解决方案（这不是OP想要的，现在我了解了情况）。虽然正则表达式可能看起来很粗糙，CSS有简单的规则可以遵循，您不必为了得到一个简单的字符串而干扰DOM。@TomášVarga正则表达式将无法处理像
.box[id=“{background:blue；”]{background:red；}这样的每一个假设选择器
现在，他们会吗？@PatrickRoberts认为这只是一种快速而肮脏的方式，我觉得这个例子似乎太理论化了（顺便说一句，我的答案的最后一个例子有效）