如何通过Javascript获取HTML元素的所有已设置CSS属性

• HTMLElement的style是CSSStyleDeclaration实例，使用for...of遍历该对象时，只能获取到浏览器从内联样式中解析展开的长名CSS属性，你直接写的简写属性不会出现在遍历列表中。
• 当你给简写属性（比如示例中的background）设置CSS变量作为值时，浏览器无法将其拆分为多个确定的长名属性，因此遍历列表中不会出现任何和该简写属性相关的条目，自然无法读取到值。

推荐直接解析元素的style.cssText属性获取所有原始内联样式，不管是简写还是长名属性都能完整拿到，代码示例如下：

window.onload = function(){
  let node = document.querySelector('b-c');
  const inlineStyles = {};
  // 拆分cssText获取所有原始样式键值对
  node.style.cssText.split(';').forEach(rule => {
    rule = rule.trim();
    if (!rule) return;
    const [prop, ...valueParts] = rule.split(':');
    const propName = prop.trim();
    const propValue = valueParts.join(':').trim();
    if (propName && propValue) {
      inlineStyles[propName] = propValue;
    }
  });

  for (const [s, val] of Object.entries(inlineStyles)) {
    console.log(s, val);
    // 原有业务逻辑
    //if (val && typeof val === 'string')
      //designItem.styles.set(s, val);
  }
}

如果需要同时获取浏览器展开后的长名属性，可以将上述方法和你原来的遍历逻辑结合使用，做好属性去重即可。

内容的提问来源于stack exchange，提问作者Jochen Kühner