为何给DOM元素style属性赋值字符串后，获取到的却是对象？

嘿，这个问题问到点子上了——这可不是JavaScript的“BUG”，而是DOM API特意设计的行为，和普通JS对象的属性规则完全不一样～

核心原因：style是访问器属性（Getter/Setter），不是普通数据属性 #

普通的JavaScript对象属性，比如：

const obj = {};
obj.myProp = 'hello';
console.log(obj.myProp); // 输出 'hello'

这是因为myProp是个「数据属性」，赋值什么就直接存什么，读取时也直接返回存储的值。

但DOM元素的style属性是个「访问器属性」——它背后有一套浏览器内置的读写逻辑：

• 当你赋值字符串时：触发的是style的setter函数。这个函数会把你传入的字符串解析成CSS规则，然后将这些样式应用到元素上，同时更新内部维护的CSSStyleDeclaration对象。
• 当你读取style时：触发的是style的getter函数，它直接返回这个CSSStyleDeclaration对象，而不是你之前赋值的那个字符串。

为什么要这么设计？ #

浏览器这么做是为了给开发者提供更灵活的样式操作能力：

• CSSStyleDeclaration对象允许你单独读写某一个样式属性，比如p.style.color = 'blue'、console.log(p.style.fontSize)，比只能操作整段字符串方便太多。
• 如果你确实想直接操作样式字符串，可以用style.cssText属性——这才是对应你赋值的那段字符串的属性：

  let p = document.getElementById('myp');
  p.style.cssText = 'color: red; font-size: 16px';
  console.log(p.style.cssText); // 输出 'color: red; font-size: 16px'
  

再补个验证小例子 #

你可以试试这段代码，就能清晰看到差异：

let p = document.getElementById('myp');
p.style = 'color: red; background: yellow';

// 读取style返回对象
console.log(typeof p.style); // 输出 'object'
console.log(p.style instanceof CSSStyleDeclaration); // 输出 true

// 可以通过对象操作单个样式
p.style.background = 'orange';
console.log(p.style.color); // 输出 'red'

// 用cssText获取完整的样式字符串
console.log(p.style.cssText); // 输出 'color: red; background: orange;'

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