Question

我有这种显示卡片的样式，我想在拿起卡片后在功能内对其进行更改。我如何使用style.background ='#FFF';使用div#memory_board > div类型？

div#memory_board > div{
background:black;
border:#000 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:64px;
cursor:pointer;
text-align:center;
}

Answer 1

您可以将以下内容添加到CSS中，然后将其应用于“挑选的”卡<div>：

div#memory_board > div.picked {
 background: #fff;
}

将以上内容添加到样式表后，您可以将picked类添加到<div>元素正下方的#memory_board元素中，从而产生所需的视觉效果。

<div id="memory_board">
    <div></div> <!-- regular style -->

    <div></div> <!-- regular style -->

    <div class="picked"></div> <!-- regular style with "picked" appearance -->
</div>

更新

要将picked类应用于单击的<div>，您需要在脚本中更新cardIsSelected()函数：

 function cardIsSelected(event, letter)
 { 
    /* This will cause "picked" class to be added to the div being 
       clicked */
    event.currentTarget.classList.add('picked');

    /* Leave existing code */
 }

您还需要通过更新以下代码行将event对象传递给cardIsSelected：

output += '<div id="card'+i+'" onclick="cardIsSelected(event, \''+memory_array[i]+'\')">'+memory_array[i]+'</div>';

这里是working CodePen

在JavaScript函数中更改element> element样式

1 个答案:

更新