자바 스크립트 DOM style.backgroundColor 작동하지 제대로

Question

은 다음과

내 문제가 될 때 :

내가 document.write을 사용하여 "새로운"문서를 생성하고 처음에 나는이 웹 페이지의 전체 제목을 쓰기 자바 스크립트 코드의 조각을 . 그 머리에는 다음과 같은 CSS 코드가 약간 있습니다 :

<style type='text/css'> 
.black {background-color: black;} 
.white {background-color: #ffffff;} 
td {width:50px; height:50px;} 
</style> 

그리고 자바 스크립트는 본문 섹션에 표를 그립니다. 코드를 작성하는 것은 기본적으로 체스 보드를 그리는 두 개의 루프입니다. 하지만 그건 중요하지 않습니다. 모든 td 요소는 적절하게 채색되는 클래스 black 또는 white을 얻습니다. 그리고 모든 td은 onclick='changeBg(this)' 속성을 갖습니다.

여기에 문제가 생겨납니다. 클릭 한 요소의 배경색에 액세스 할 수 없습니다. 기능은 다음과 같습니다 :

function changeBg(element) 
{ 
    alert(element.style.backgroundColor); 
    element.style.backgroundColor = "red"; 
} 

처음에는 현재 요소의 색상을 알려줍니다. 항상 공백 알림을 알립니다. 색상을 빨간색으로 변경하고 요소를 다시 클릭하면 경고가 나타납니다. red. 브라우저에서 td의 색상이 지정되어 있고 방화범이 끌려서 검사하면 background-color: black | white이 있습니다.

무엇이 빠졌으며이를 해결하는 방법은 무엇입니까? 나는 그들이 style="color: black | white"을 사용하여 만들 때 td 색상을 설정하면 깨달았습니다. 그것은 작동하지만 그때 그들이 속한 수업을 모른다.

Answer 1

당신은 사용 현재 적용된 스타일를 얻을 수 있습니다 window.getComputedStyle-Docs

function changeBg(element) { 
    alert(window.getComputedStyle(element).backgroundColor); 
    element.style.backgroundColor = "red"; 
}