javascript - document.getelementbyid().style.width 没有值

Question

我写了一些代码来调用 javascript 中的函数来提醒 div 顶部的值。但它不起作用。好像忘记了一个简单的点，但是我找不到。

脚本是:

var tempimg = "";
var tempdiv = "";


function changebg(x) {
    current = document.getElementById(x);
    alert(document.getElementById('div1').style.width);

}

CSS 是:

.div11 {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 10px;
    left: 10px;
    background-size: cover;
    -webkit-transition: 1000ms;
    -moz-transition: 1000ms;
}
.div22 {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 10px;
    left: 120px;
    background-size: cover;
    -webkit-transition: 1000ms;
    -moz-transition: 1000ms;
}
.div33 {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 10px;
    left: 230px;
    background-size: cover;
    -webkit-transition: 1000ms;
    -moz-transition: 1000ms;
}

我把我的代码放在fiddle

Answer 1

使用 getComputedStyle相反:

alert(getComputedStyle(document.getElementById('div1')).height);

根据 MDN :

it is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the section, or external style sheets

即它返回由 <div style="<!-- these values -->"></div> 表示的值而不是外部 CSS 应用的样式。