如何在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,我得到一个空字符串"".但是在我left用javascript 更改值之后,例如as 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");