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

Question

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

示例:

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

如何从上面的行中提取“背景”属性的值，知道我想将它与复杂的 CSS 样式表一起使用。

Answer 1

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

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

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