如何使用JavaScript在textarea中展示全部CSS选择器与属性？

Great question! I totally get that manually hardcoding CSS into your JavaScript is a huge pain—you want to automatically pull all the CSS rules (including pseudo-classes like :hover) for a target element and display them in a textarea in proper, clean CSS format. The getComputedStyle approach you’re using right now only grabs single computed property values, which can’t give you the full selector-based rules you’re after.

Here are two reliable methods to achieve this without manual assignment:

方法1：遍历文档样式表并筛选匹配规则 #

This is the most compatible approach across modern browsers, and it lets you pull all rules that target your element (including pseudo-classes) directly from the document's stylesheets.

代码实现 #

function getElementFullCSS(element) {
  let fullCSS = '';
  // 把样式表集合转为数组方便遍历
  const allStyleSheets = Array.from(document.styleSheets);

  allStyleSheets.forEach(styleSheet => {
    try {
      // 部分跨域样式表会限制访问，所以用try/catch包裹
      const cssRules = Array.from(styleSheet.cssRules || styleSheet.rules);

      cssRules.forEach(rule => {
        // 检查元素是否匹配当前规则的选择器（包括伪类）
        if (element.matches(rule.selectorText)) {
          // 将完整规则文本添加到结果中
          fullCSS += `${rule.cssText}\n\n`;
        }
      });
    } catch (error) {
      console.warn(`跳过无法访问的样式表（大概率是跨域限制）: ${styleSheet.href}`, error);
    }
  });

  // 移除多余的换行后返回
  return fullCSS.trim();
}

// 调用函数填充textarea
const targetElement = document.getElementById('th001');
const cssTextarea = document.getElementById('csstextareadisp');
cssTextarea.value = getElementFullCSS(targetElement);

关键说明 #

• 跨域样式表处理: 来自外部域名的样式表（比如CDN资源）可能会因为CORS限制无法访问，try/catch块可以让我们优雅地跳过这些样式表。
• 伪类支持: element.matches()方法会检查元素是否匹配选择器文本，包括:hover这类伪类——哪怕元素当前没有处于伪类状态，对应的规则也会被捕获。
• 规则顺序: 收集到的规则会按照样式表中的出现顺序排列，和浏览器应用样式的顺序一致。

方法2：使用getMatchedCSSRules（兼容性注意） #

旧版浏览器支持window.getMatchedCSSRules()，它可以直接返回所有应用到元素上的CSS规则。不过这个方法在多数现代浏览器中已经被废弃，所以最好把它作为方法1的降级方案。

代码实现 #

function getMatchedCSSRulesFallback(element) {
  let fullCSS = '';

  if (window.getMatchedCSSRules) {
    // 已废弃但部分环境仍可使用
    const matchedRules = window.getMatchedCSSRules(element);
    if (matchedRules) {
      matchedRules.forEach(rule => {
        fullCSS += `${rule.cssText}\n\n`;
      });
    }
  } else {
    // 降级到样式表遍历方法
    fullCSS = getElementFullCSS(element);
  }

  return fullCSS.trim();
}

// 使用示例
const targetElement = document.getElementById('th001');
document.getElementById('csstextareadisp').value = getMatchedCSSRulesFallback(targetElement);

额外优化：格式化CSS输出 #

如果你想让输出和原始CSS的换行格式一致，可以给结果加个快速格式化步骤：

function formatCSS(cssText) {
  // 在大括号和冒号后添加换行，提升可读性
  return cssText.replace(/\{/g, '{\n  ')
                .replace(/;/g, ';\n  ')
                .replace(/\}\n  /g, '\n}\n');
}

// 填充textarea时应用格式化
cssTextarea.value = formatCSS(getElementFullCSS(targetElement));

这样输出的格式会更贴近你原始的CSS结构。

内容的提问来源于stack exchange，提问作者Jarod Graham