javascript - 为 div 背景色显示空值

Question

我有以下代码来监听 div 元素上的点击事件。

HTML:

 <div id="container">
    <div id="1" class="square"></div>
    <div id="2" class="square"></div>
    <div id="3" class="square"></div>
    <div id="4" class="square"></div>
    <div id="5" class="square"></div>
    <div id="6" class="square"></div>
    <div id="7" class="square"></div>
    <div id="8" class="square"></div>
    <div id="9" class="square"></div>
    <div id="10" class="square"></div>
    <div id="11" class="square"></div>
    <div id="12" class="square"></div>
    <div id="13" class="square"></div>
    <div id="14" class="square"></div>
    <div id="15" class="square"></div>
    <div id="16" class="square"></div>

</div>

JavaScript:

document.getElementById("container").addEventListener("click",function(e) { 
if (e.target && e.target.matches("div"))
{
    console.log("Square element clicked!");

    SquareBackground=this.style.backgroundColor;
    console.log(SquareBackground);
    SquareId=this.getAttribute('id');
    console.log(SquareId);
}
});

我创建了一个数组来设置 div 元素的背景颜色，并且代码在浏览器中正常工作。当我点击任何方形 div 时，我会收到“点击方形元素”消息。但是，当我尝试打印单击的 div 的背景颜色时，我在控制台中得到一个空值。此外，对于第二个输出，我得到的是“容器”而不是单击的 div 的 id。请帮忙。

编辑: 此函数用于设置正方形的背景颜色。数组 combineColors[] 包含随机生成的 RGB 值，例如。 rgb(255,0,9).

function changeSquareColor()
{
    for(i=0;i<squares.length;i++)
    {
        squares[i].style.backgroundColor=combinedColors[i];
    }
}

CSS:

    .square{
        width: 20%;
        background: blue;
        float:left;
        padding-bottom: 20%;
        margin: 1.66%;
    }

body{
    background-color: black;
}

#container{

    margin: 20px auto;
    width: 600px;
};

Answer 1

HTMLElement.style 只会获得内联样式 (<div style="color: blue;">)。

backgroundColor在你的元素中来自它的类(我猜)，而不是内联样式。

要获得当前应用/计算的样式，您必须使用 window.getComputedStyle :

var element = document.getElementById('blueDiv');
var pre = document.getElementById('style');
pre.innerHTML = 'Its background color is: ' + window.getComputedStyle(element).getPropertyValue("background-color");

.blue{
  background-color: blue;
  padding: 5px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: white;
}

<div id="blueDiv" class="blue">
  I'm blue da bu dee da bu die
</div>

<pre id="style"></pre>