如何在javascript中获取样式属性的初始值？

Question

在我的html文件中，我有以下标记：

<div class="long_box">
    <div class="image1">  <img src="images/image1.png">  </div>
    <div class="image2">  <img src="images/image2.png">  </div>
    <div class="image3">  <img src="images/image3.png">  </div>
</div>

在css文件中，我应用了以下样式规则：

.long_box {
    width: 3300px;
    height: 768px;
    position: absolute;
    left: 10px;
    top: 0;
}

在javascript文件中我创建了一个变量：

var longbox = document.getElementsByClassName("long_box")[0];

现在，当我尝试将left long_box的初始值调回longbox.style.left时，我得到一个空字符串""。但在我使用javascript更改left值后，例如和longbox.style.left = 100 + 'px一样，然后回想起它的值，然后我在控制台中得到100px。所以，

如何在javascript中获取样式属性的初始值？

Answer 1

Javascripts element.style仅返回内联样式，对于其他样式，例如在样式表中设置，您必须使用getComputedStyle

var longbox = document.getElementsByClassName("long_box")[0];

var styles  = window.getComputedStyle(longbox);

var lef     = styles.getPropertyValue("left");