获取所有css类背景和颜色属性值

Question

我想获得所有CSS声明的所有背景和颜色属性值.

例如:

    body {
      background: #fff;
    }
    .aaa {
      background: #dedede;
      color: #000
    }
    .text {
      color: #333;
      padding: 10px
    }

我想获得这样的输出,并且这些属性的值需要存储在数组中.

    body {
      background: #fff;
    }
    .aaa {
      background: #dedede;
      color: #000
    }
    .text {
      color: #333;
    }

我尝试使用jQuery来做到这一点.我可以得到一个特定类的背景属性值,如.aaa或.text.我如何获得所有类的值？

$('#btn-invert').on('click', function() {
  var color = $("body").css("background");
  // var test = invertColor("#00a3fe"); 
  console.log(color); 
});

Answer 1

阅读document.styleSheets包含所有信息的样式用法(let cssArr=...在代码段中).当您将其读入阵列时,您可以从该阵列生成字符串(let genCssStr在代码段中).以这种方式读取的颜色是格式化的,rgb(255, 255, 255)所以我们需要将它们转换为十六进制(这里是rgbToHexsrc )

const rgbToHex = (rgbStr) => rgbStr && '#'+rgbStr.slice(4,-1).split(',').map(x => (+x).toString(16).padStart(2, '0')).join('');

const styles = document.styleSheets;

let cssArr =[...styles[0].cssRules].map(x=> ({ 
  class:      x.selectorText, 
  color:      rgbToHex(x.style.color),
  background: rgbToHex(x.style.background),   
}));

let genCssStr=''; cssArr.forEach(x=> genCssStr+=`
${x.class} {
  ${(x.background ? 'background: '+x.background : '')}
  ${(x.color ? 'color: '+x.color : '')}
}
`.replace(/^  \n/gm,'')); // remove empty lines 

console.log("array:", JSON.stringify(cssArr));
console.log("text:\n", genCssStr);

body {
      background: #fff;
    }
    .aaa {
      background: #dedede;
      color: #000
    }
    .text {
      color: #333;
      padding: 10px
    }