在你这里的style里。"."和[]是没区别的

 console.log(p.style['top'] === p.style.top);

"."和[]的区别在于，请看你是怎样变成隔壁老王:

    var obj = {};
    obj.name = '隔壁老王';
    var yourName = "name";
    console.log(obj[yourName]);//隔壁老王
    console.log(obj.yourName);//undefined
    

此时我们查看一下obj的属性,可以发现obj.name=xxx其实是设置了一个【字符串类型】的属性
而var yourName = "name";则把这个字符串属性的值赋值给了变量yourName，所以你成了老王

console.log(Object.keys(obj));//输出["name"]

总结：

"."点只能取到【静态】的值
，[]则能够取到作为【变量动态】改变的值

你认为以下代码有什么区别：

let funk = {
    top: 0,
    left: 0
};
// 1: funk.top
// 2: funk['top']

至少我认为2很好看！

在此处没什么区别，属性名就是个字符串。
但是某天你需要特殊的属性名的时候就不一样了
比如：

var obj = {
    'what is this':'name with blank'
}

取此属性的时候怎么取呢？

在你的例子中是没有区别的。

[] 和 .都能访问属性 。

不同的是：

• . ： 后面的都当成了字符串.

• [] ： 这个里面可以使用变量.

比如：

var obj = {
    prop1: '1',
    prop2: '2',
    prop3: '3',
    prop4: '4',
    prop5: '5',
    prop6: '6'
};

for (var i = 1; i < 7; ++i) {
    console.log(obj['prop' + i]);
}
// '1'
// '2'
// '3'
// '4'
// '5'
// '6'

如果使用.就不行了 只能 obj.prop1 , obj.prop2 ……

可以读下 阮一峰的JavaScript 标准参考教程 对象 - 读取属性