如何用JavaScript获取仅用户定义的CSS样式（忽略浏览器默认样式）

window.getComputedStyle会返回元素的所有计算样式，包括浏览器默认值。要只提取用户定义的样式（内联、外部样式表、<style>标签中的规则），可以用以下两种JavaScript方案：

方案1：对比空元素的默认计算样式 #

核心思路是创建一个同类型的空元素（无任何用户样式），用它的计算样式作为基准，和目标元素的计算样式对比，差异部分就是用户定义的样式。

function getUserDefinedStyles(element) {
  // 创建同类型的临时空元素
  const tempEl = document.createElement(element.tagName);
  // 隐藏元素避免干扰页面布局
  tempEl.style.cssText = 'position:absolute; visibility:hidden; pointer-events:none;';
  document.body.appendChild(tempEl);

  // 获取基准样式和目标元素样式
  const defaultStyles = window.getComputedStyle(tempEl);
  const targetStyles = window.getComputedStyle(element);

  const userStyles = {};

  // 遍历所有样式属性，筛选差异值
  Array.from(targetStyles).forEach(prop => {
    const targetVal = targetStyles.getPropertyValue(prop);
    const defaultVal = defaultStyles.getPropertyValue(prop);
    if (targetVal !== defaultVal) {
      userStyles[prop] = targetVal;
    }
  });

  // 补充内联样式（即使值和默认一致，也是用户显式设置的）
  Array.from(element.style).forEach(prop => {
    userStyles[prop] = element.style.getPropertyValue(prop);
  });

  // 清理临时元素
  document.body.removeChild(tempEl);

  return userStyles;
}

// 使用示例
const targetElement = document.getElementById('your-element-id');
const userStyles = getUserDefinedStyles(targetElement);
console.log('用户定义样式:', userStyles);

注意点： #

• 会包含继承的用户样式（比如父元素设置的font-family），因为临时元素只会继承浏览器默认的上下文样式
• 能准确处理不同浏览器的默认样式差异
• 临时元素必须插入DOM，否则部分依赖上下文的样式无法正确获取基准值

方案2：遍历用户添加的样式表 #

直接遍历页面中所有用户样式表，筛选出匹配目标元素的规则，收集样式属性，同时优先保留内联样式。

function getUserDefinedStylesFromSheets(element) {
  const userStyles = {};

  // 先收集内联样式（优先级最高）
  Array.from(element.style).forEach(prop => {
    userStyles[prop] = element.style.getPropertyValue(prop);
  });

  // 遍历所有用户样式表
  Array.from(document.styleSheets).forEach(sheet => {
    try {
      Array.from(sheet.cssRules).forEach(rule => {
        // 只处理匹配目标元素的样式规则
        if (rule instanceof CSSStyleRule && element.matches(rule.selectorText)) {
          Array.from(rule.style).forEach(prop => {
            // 内联样式已存在则跳过
            if (!userStyles[prop]) {
              userStyles[prop] = rule.style.getPropertyValue(prop);
            }
          });
        }
      });
    } catch (e) {
      console.warn('无法访问跨域样式表:', sheet.href);
    }
  });

  return userStyles;
}

// 使用示例
const targetElement = document.getElementById('your-element-id');
const userStyles = getUserDefinedStylesFromSheets(targetElement);
console.log('用户定义样式:', userStyles);

注意点： #

• 无法访问跨域的外部样式表（浏览器安全限制）
• 仅收集直接匹配目标元素的样式规则，不包含继承样式
• 需要手动处理选择器优先级问题（如果多个规则匹配同一属性，后遍历的规则会覆盖先遍历的，和浏览器实际渲染顺序一致）

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