elem.style.property与CSS有所不同

Question

我有一个根据css属性正确呈现的元素。但是，如果我检查样式对象，则该属性会丢失。

JS获取样式对象，但属性为空

let loc = document.querySelector('.leftNavOptionSelectedW');
let top = loc.style.top; //returns blank
console.log(loc.style); //empty value for property 'top'

用于elem.style的Chrome控制台输出未显示属性集

CSS定义属性和值

.leftNavOptionSelectedW {
    position: absolute;
    top: 360px; // <---- property and value defined
    left: 0px;
    z-index: 0;
    width: 180px; 
}

计算样式正确显示了属性和值

开发者控制台中的样式正确显示

在js中编辑elem样式

let loc = document.querySelector('.leftNavOptionSelectedW');
loc.style.border='1px solid red';

为什么没有显示“ top”属性值？

谢谢！