如何在JavaScript运行时获取Web元素的所有生效CSS属性？

你要的这类信息在网页渲染完成后完全可以获取，以下是针对Java+Selenium环境的具体实现方案，精准拿到浏览器开发者工具中未划掉的生效CSS属性，避免getComputedStyle返回的冗余默认属性：

核心思路 #

浏览器开发者工具里未划掉的属性，是经过CSS层叠、优先级计算后最终应用到元素的非默认、未被覆盖的属性。我们可以通过浏览器提供的CSS规则匹配API，直接提取这些生效属性，而非返回全量计算样式。

具体实现 #

1. 编写注入页面的JavaScript脚本 #

这个脚本会获取元素匹配的所有CSS规则，按优先级覆盖后提取最终生效属性，同时跳过内联样式：

function getAppliedStyles(element) {
  const appliedStyles = {};
  // 兼容不同浏览器的规则匹配API
  const getMatchedRules = element.ownerDocument.defaultView.getMatchedCSSRules || 
                          element.ownerDocument.defaultView.webkitGetMatchedCSSRules;
  if (!getMatchedRules) return appliedStyles;

  // 获取所有匹配的CSS规则（排除内联样式）
  const rules = getMatchedRules(element, '');
  if (!rules) return appliedStyles;

  // 按优先级从低到高遍历，高优先级规则会自动覆盖低优先级属性
  rules.forEach(rule => {
    if (rule.type === CSSRule.STYLE_RULE) {
      const style = rule.style;
      for (let i = 0; i < style.length; i++) {
        const prop = style[i];
        appliedStyles[prop] = style.getPropertyValue(prop);
      }
    }
  });

  // 可选：移除浏览器默认样式（若不需要默认值则打开注释）
  // const defaultStyle = element.ownerDocument.defaultView.getDefaultComputedStyle(element);
  // Object.keys(appliedStyles).forEach(prop => {
  //   if (appliedStyles[prop] === defaultStyle.getPropertyValue(prop)) {
  //     delete appliedStyles[prop];
  //   }
  // });

  return appliedStyles;
}

// 接收Selenium传入的目标元素并返回结果
return getAppliedStyles(arguments[0]);

2. Java+Selenium执行脚本 #

将上述JS脚本注入页面，获取目标元素的生效CSS属性：

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebElement;
import java.util.Map;

// 假设已获取目标元素targetElement
JavascriptExecutor js = (JavascriptExecutor) driver;
Map<String, String> appliedStyles = (Map<String, String>) js.executeScript(
    "function getAppliedStyles(element) { const appliedStyles = {}; const getMatchedRules = element.ownerDocument.defaultView.getMatchedCSSRules || element.ownerDocument.defaultView.webkitGetMatchedCSSRules; if (!getMatchedRules) return appliedStyles; const rules = getMatchedRules(element, ''); if (!rules) return appliedStyles; rules.forEach(rule => { if (rule.type === CSSRule.STYLE_RULE) { const style = rule.style; for (let i = 0; i < style.length; i++) { const prop = style[i]; appliedStyles[prop] = style.getPropertyValue(prop); } } }); return appliedStyles; } return getAppliedStyles(arguments[0]);",
    targetElement
);

// 打印生效属性
appliedStyles.forEach((prop, value) -> System.out.println(prop + ": " + value));

注意事项 #

• 部分浏览器可能需要兼容前缀（如webkitGetMatchedCSSRules），脚本已做兼容处理；
• 若页面存在内容安全策略（CSP），需确保允许使用该API；
• 可选的默认样式过滤逻辑可根据需求开启，进一步精简结果。

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