document.getelementbyid(). style.width에는 값이 없습니다.

Question

div의 맨 위에 값을 경고하기 위해 javascript에서 함수를 호출하는 코드를 작성했습니다. 그러나 그것은 효과가 없습니다. 나는 간단한 요점을 잊어 버린 것 같지만 찾을 수가 없다.

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에 :

그것은 단지 CSS의 요소의 인라인 스타일 속성에 설정 선언이 아닌 다른 곳에서 스타일 규칙 을에서 오는 자들을 나타 내기 때문에 그것은 일반적으로 요소의 스타일, 에 대한 학습에 도움이되지 않습니다

같은 섹션에서 스타일 규칙, 또는 외부 스타일 시트

으로 그것은 <div style="<!-- these values -->"></div>으로 표시 값이 아닌 외부 CSS에 의해 적용된 스타일을 반환합니다 즉.