Javascript DOM style.backgroundColor không hoạt động đúng

Question

vấn đề của tôi là vì nó sau:

Tôi có một mảnh mã javascript mà tạo ra một "mới" tài liệu sử dụng document.write và lúc đầu tôi viết toàn bộ tiêu đề của trang web . Trong đầu tôi có một chút mã CSS trông giống như sau:

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

Và javascript vẽ một bảng trong phần nội dung. Viết mã về cơ bản là hai vòng for vẽ bảng cờ. Nhưng điều đó thậm chí không quan trọng. Mỗi thành phần td nhận được một lớp black hoặc white theo đó nó được tô màu đúng cách. Và mọi td đều nhận được thuộc tính onclick='changeBg(this)'.

Đây là nơi sự cố xảy ra. Tôi không thể truy cập màu nền của phần tử được nhấp vào. Hàm trông giống như vậy:

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

Lúc đầu, tôi cảnh báo màu của phần tử hiện tại. Nó luôn cảnh báo một thông báo trống. Sau khi tôi đổi màu thành màu đỏ và nhấp lại vào phần tử, nó sẽ cảnh báo red. Các td có màu trong trình duyệt và nếu tôi kiểm tra chúng bằng firebug có background-color: black | white;

Tôi thiếu gì và cách sửa lỗi này? Tôi đã nhận ra rằng nếu tôi đặt màu td khi tạo chúng bằng cách sử dụng style="color: black | white"; nó hoạt động nhưng sau đó tôi không biết họ thuộc về lớp nào.

Answer 1

Bạn có thể lấy phong cách hiện áp dụng sử dụng window.getComputedStyle - Docs

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