如何使用JavaScript获取vue-cli编译项目中指定class对应的CSS属性

要获取单个类对应的独立样式，不能用getComputedStyle，它返回的是元素所有样式叠加后的最终计算值，不符合你的需求。正确的实现思路是直接遍历浏览器加载的所有样式表，匹配每个类选择器对应的独立样式规则。

完整实现代码 #

// 提取页面中所有出现的唯一class名称
function getAllUniqueClasses() {
  const allElements = document.querySelectorAll('*');
  const classSet = new Set();
  allElements.forEach(el => {
    el.classList.forEach(cls => classSet.add(cls));
  });
  return Array.from(classSet);
}

// 遍历样式表，获取每个class对应的独立CSS属性
function getClassStyles(classes) {
  const result = {};
  classes.forEach(cls => result[cls] = {});

  for (const sheet of document.styleSheets) {
    try {
      const rules = sheet.cssRules || sheet.rules;
      if (!rules) continue;
      for (const rule of rules) {
        if (rule.type !== CSSRule.STYLE_RULE) continue;
        const selector = rule.selectorText;
        classes.forEach(cls => {
          const escapedCls = cls.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
          const classSelector = `.${escapedCls}`;
          // 仅匹配完全等于当前类的选择器，排除组合选择器
          if (selector === classSelector) {
            for (let i = 0; i < rule.style.length; i++) {
              const prop = rule.style[i];
              result[cls][prop] = rule.style.getPropertyValue(prop);
            }
          }
        });
      }
    } catch (e) {
      // 跨域样式表无法访问时自动跳过
    }
  }
  return result;
}

// 生成CSS文件并自动下载
function generateCssFile(classStyles) {
  let cssContent = '';
  Object.entries(classStyles).forEach(([cls, props]) => {
    if (Object.keys(props).length === 0) return;
    cssContent += `.${cls} {\n`;
    Object.entries(props).forEach(([prop, value]) => {
      cssContent += `  ${prop}: ${value};\n`;
    });
    cssContent += '}\n\n';
  });
  const blob = new Blob([cssContent], { type: 'text/css' });
  const url = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = 'extracted-class-styles.css';
  downloadLink.click();
  URL.revokeObjectURL(url);
}

使用说明 #

打开你要提取样式的页面，在浏览器控制台依次执行以下代码即可：

const allClasses = getAllUniqueClasses();
const classStyleMap = getClassStyles(allClasses);
generateCssFile(classStyleMap);

注意事项 #

• 如果你的Vuetify样式是通过CDN引入的，会触发跨域限制导致无法读取样式规则，建议在vue-cli本地开发环境下运行提取，或者将Vuetify的CSS文件部署到同域名下再操作。
• 上述代码默认仅匹配完全独立的类选择器，如果需要提取.theme--light .red--text这类组合选择器中的样式，可以修改匹配规则，将selector === classSelector改为selector.includes(classSelector)即可。
• 没有匹配到独立样式的类会自动被忽略，不会出现在最终生成的CSS文件中。

内容的提问来源于stack exchange，提问作者Xaime Pardal