分配字符串但返回一个对象 - 正在播放的浏览器？

Question

鉴于此标签：

<p id="myp">foo para

我知道你不应该，但是如果我将一个字符串分配给相应DOM对象的style属性，我可以改变它的样式：

let p = document.getElementById('myp');
p.style = 'color: red'; //assign a string

我想，

p.style现在应该指向一个字符串。但是，如果我再询问样式属性，我会得到一个对象而不是字符串：

console.log(p.style); //get back an object

通常在JavaScript中，如果我将一个字符串赋给变量或对象属性，我希望当我要求该值时，该值仍然是一个字符串。那么浏览器是否会改变这一点，或者是否有一种JavaScript机制在起作用？

Answer 1

如果在控制台中调试HTMLElement.prototype，则可以看到style是一个访问者属性。为其赋值时，不是仅覆盖有问题的属性，而是执行setter方法，该方法可以覆盖您传递的值。毫无疑问，确保style属性始终是一个对象（即CSSStyleDeclaration的实例），因为很多事情都依赖于此。

要覆盖元素的style 属性，您可以安全地使用p.setAttribute('style', 'color: red');

Answer 2

document.getElementById会返回HTMLElement，如果您查看原型

我们发现style不是“正常”属性，实际上是getter和setter。

显然这是一个超级简化的例子，但基本上它将被实现类似：

  let element = {
        color: 'red',
        get style() {
            return { color: this.color }
        },
        set style(s) {
            this.color = s.split(': ')[1]
        }
    }

element.style = 'color: blue';
console.log(element.style);

Answer 3

p元素的样式是包含其所有样式的对象，您需要选择所需的样式。

更新：您也可以从代码段中的cssText获取字符串。

p.style = 'color: red';我相信这一行被视为：

p.style.color: 'red'; 

let p = document.getElementById('myp');
p.style = 'color: red';
console.log(p.style.color);

console.log(p.style.cssText);

<p id="myp">foo para<p>

Answer 4

根据mozilla文档

  

HTMLElement.style属性用于获取和设置   内联样式的元素。在获得时，它返回一个   包含所有样式列表的CSSStyleDeclaration对象   具有为属性指定的值的该元素的属性   在元素的内联样式属性中定义。

请参阅：developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style