Question

我需要能够将div的背景色设置回其原始状态。我可以将其存储在变量中并调用它，但是想知道为什么不能使用“ initial”。现在是为了...将css属性设置回其初始状态吗？

谢谢。

testDiv.style.background = "red";

//Shouldn't this turn it back to it's original state of yellow?
testDiv.style.background = "initial";

#testDiv{
  background-color: yellow;
  width:40px;
  height:40px;
}

<div id="testDiv"></div>

Answer 1

您要将initial设置为元素style.background属性的 value ，这意味着它将覆盖CSS的默认背景色选择元素。如果您想将background属性重置为CSS指定的属性，请改用removeProperty，以完全删除由Javascript设置的属性，以便页面的CSS重新获得最高优先级：

testDiv.style.background = "red";
testDiv.style.removeProperty('background');

#testDiv{
  background-color: yellow;
  width:40px;
  height:40px;
}

<div id="testDiv"></div>

Answer 2

如documenation中所述：

initial CSS关键字应用a的初始（或默认）值元素的属性。可以将其应用于任何CSS属性。

和

CSS属性的初始值是其默认值，如其定义表。^ref

因此，与您所想的不同，initial会在设置background-color之前将其初始值放置，而不是您为设置的值。

由于JS添加了内联样式，因此您可以简单地删除该样式以返回黄色，而无需额外的变量，因为您的样式保持定义但被覆盖：

testDiv.style.backgroundColor = "red";

//empty the style attribute
testDiv.style="";
/*OR
testDiv.style.backgroundColor="";
*/

#testDiv{
  background-color: yellow;
  width:40px;
  height:40px;
}

<div id="testDiv"></div>

初始颜色...工作如何？

2 个答案: