Question

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

示例：

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

如何提取＆＃34;背景＆＃34;知道这一点，来自上述行的财产价值我想在复杂的CSS样式表中使用它。

Answer 1

使用CSSStyleSheet API，您可以获得值，而不必破坏可怕的正则表达式和挑剔的字符串操作：

＆＃13;

var strCSS = '.box{background: red; color: white;}';

function getValue(css, selector, property) {
  var style = document.createElement('style');
  style.appendChild(document.createTextNode(css));
  document.body.appendChild(style);
  var sheet = style.sheet;
  style.remove();
  var rule = Array
    .from(sheet.cssRules)
    .find(cssRule => cssRule.selectorText === selector);

  if (rule) {
    return rule.style.getPropertyValue(property);
  }
}

console.log(getValue(strCSS, '.box', 'background'));

＆＃13;

<style>.box{background: red; color: white;}</style>

＆＃13;

Answer 2

在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];
    }
}

这应该有效。

Answer 3

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

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')

Answer 4

这是一个不使用正则表达式的简单解决方案：

＆＃13;

const extractProperties = function extractProperties(str) {
  return str 
.substring(strCSS.indexOf('{') + 1, strCSS.indexOf('}'))
.split(";")
.map((el) => el.substring(0, el.indexOf(':')).trim())
.filter(Boolean);
};

const strCSS = ".box:hover {background: red; color: white; transform: translate(50%, 50%); font-family: arial}";
console.log(extractProperties(strCSS));

＆＃13;

这个函数的一个小变体，因为我现在才意识到它是你想要的值（不是我的错，你说＆＃34;我怎样才能得到＆＃39;背景＆＃39;属性＆＃34;）：

＆＃13;

const extractValues = function extractValues(str) {
  return str 
.substring(strCSS.indexOf('{') + 1, strCSS.indexOf('}'))
.split(";")
.map((el) => el.substring(el.indexOf(':') + 1, el.length).trim())
.filter(Boolean);
};

const strCSS = ".box:hover {background: red; color: white; transform: translate(50%, 50%); font-family: arial}";
console.log(extractValues(strCSS));

＆＃13;

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

4 个答案: