javascript - 盒子阴影在 JavaScript 中不会是 "none"

Question

我的目标是有一个显示内容的 div，并在单击后有一个框阴影。然后我想再次点击div隐藏内容和框阴影。除了在我将其设置为无的第二个函数中单击后不会隐藏的框阴影外，一切都很好。为什么这行不通？

HTML:

<div class="col-md-4 top" id="time">
<div class="clickme" id="clickme" onclick="clickme(); 
return false;">
<p>Click here for the time and date!</p>
</div>
</div>

JavaScript:

function clickme(){
document.getElementById("clickme").style.display = 'none';
document.getElementById("time").style.boxShadow = "inset 6em 6em 6em #3B3130";
document.getElementById('time').innerHTML = "<h2 onclick='revert();''>It is " + theTime + " and the date is " + theDate + "</h2>";
}

function revert(){
document.getElementById('time').innerHTML = "";
document.getElementById("clickme").style.display = 'inline';
document.getElementById("time").style.boxShadow = 'none';
}

Answer 1

这是因为当您修改其父级的内部 HTML 时，您“破坏”了 div #clickme。

当我稍微移动元素时看到它工作得很好:

function clickme() {
  var theTime = 'some time';
  var theDate = 'some date';
  document.getElementById("clickme").style.display = 'none';
  document.getElementById("time").style.boxShadow = "inset 6em 6em 6em #3B3130";
  document.getElementById('time').innerHTML = "<h2 onclick='revert();''>It is " + theTime + " and the date is " + theDate + "</h2>";
}

function revert() {
  document.getElementById('time').innerHTML = "";
  document.getElementById("clickme").style.display = 'inline';
  document.getElementById("time").style.boxShadow = 'none';
}

<div class="col-md-4 top" id="time"></div>
<div class="clickme" id="clickme" onclick="clickme(); 
return false;">
  <p>Click here for the time and date!</p>
</div>

不要忘记 - 类似的事情通常是使用类完成的，而不是直接应用样式。