Question

我有以下代码来侦听div元素上的click事件。

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时，我收到“Square Element clicked”消息。但是，当我尝试打印单击的div的背景颜色时，我在控制台中得到一个空值。另外，对于第二个输出，我得到“容器”而不是被点击的div的id。请帮忙。

编辑：此功能用于设置方块的背景颜色。 arrayColors []数组包含随机生成的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：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这似乎是出于某种原因，如果你在css类中设置它不会看到它的背景颜色，但是内联它可以很好地检索它。此代码也没有返回和id或颜色，但如果你使用目标div你可以得到它的属性。

document.getElementById("container").addEventListener("click", function(e) {
  if (e.target && e.target.matches("div")) {
    console.log("Square element clicked!");

    SquareBackground = e.target.style.backgroundColor;
    console.log(SquareBackground);
    SquareId = e.target.getAttribute('id');
    console.log(SquareId);
  }
});

.square {
  border: 1px solid black;
  height: 50px;
  width: 50px;  
}

<div id="container">
  <div id="1" style=
" background-color:red;" class="square"></div>
  <div id="2"  style=
" background-color:blue;" 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>

显示div背景颜色的空值

2 个答案: