javascript - 为什么JS通过getComputedStyle()方法获取top值返回的不是设置的top属性值？

Question

如题，给一个<p id="p1" class="p1"></p>的盒子设置css样式为：

.p1{
     width: 200px;
     height: 300px;
     background: red;
     position: absolute;
     left: 100px;
     top: 200px;
}

使用如下方法获取p1盒子的css属性值：

var p1 = document.getElementById("p1");
var ss = window.getComputedStyle(p1,null);
var left = ss.left;
var top = ss.top;

然后使用console.log()打印left和top,结果left打印的值为100px，而打印top结果为一个对象：

请问这是什么原因？

Answer 1

这样用

console.log(ss.top);

赋值用法：

var top1 = ss.top;
console.log(top1);

错误用法：

var top = ss.top;
console.log(top);

Answer 2

我晓得了，因为top是window对象的引用，top是window对象的属性，这里使用top就是对window的引用，所以打印出这个window对象，把ss.top赋给其他名字比如pTop就好了。

Answer 3

变量为什么要命名成属性名？