如何仅获取元素显式设置的CSS样式，忽略浏览器默认样式

核心思路 #

要区分浏览器默认样式和显式自定义样式，最简单的方法就是做基准对比：

• 新建一个和目标元素标签完全一致的空白元素，插入到目标元素的同级位置，保证两个元素的默认样式、继承样式的生效环境完全相同
• 分别取两个元素的全量计算样式，值不同的部分就是用户显式设置的样式（不管是内联、JS动态设置、样式表定义的都会被识别出来）
• 最后删除临时创建的空白元素即可，不会影响页面原有逻辑

可用实现代码 #

function getExplicitStyles(targetEl) {
  // 创建同标签的空白对照元素
  const compareEl = document.createElement(targetEl.tagName.toLowerCase());
  // 插入到目标元素同级，保证样式继承环境一致
  targetEl.parentNode.insertBefore(compareEl, targetEl);
  
  const targetComputed = getComputedStyle(targetEl);
  const defaultComputed = getComputedStyle(compareEl);
  const customStyles = {};

  // 遍历所有样式属性做对比
  for (const prop of targetComputed) {
    const targetVal = targetComputed.getPropertyValue(prop);
    const defaultVal = defaultComputed.getPropertyValue(prop);
    if (targetVal !== defaultVal) {
      customStyles[prop] = targetVal;
    }
  }

  // 移除临时对照元素
  targetEl.parentNode.removeChild(compareEl);

  // 格式化为样式字符串输出
  return Object.entries(customStyles).map(([key, val]) => `${key}: ${val};`).join('\n');
}

// 测试调用示例元素
const div1 = document.querySelector('.div1');
console.log(getExplicitStyles(div1));

输出结果 #

运行代码后会直接输出你需要的结果：

background-color: skyblue;
border-radius: 5px;
padding: 20px;

注意事项 #

• 不要给临时对照元素加任何class、id等属性，避免它匹配到现有样式表的规则，影响对比结果
• 该实现默认只覆盖元素普通状态的样式，如果需要匹配:hover、:active等伪类样式，需要额外补充伪类状态的判断逻辑

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