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

因为你＆＃34;毁灭＆＃34;修改其父级的内部HTML时，div #clickme。

当我稍微移动元素时，看到它正常工作：

＆＃13;

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';
}

＆＃13;

<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>

＆＃13;

不要忘记 - 像这样的东西通常使用类来完成，而不是直接应用样式。

Answer 2

@Shoms已经在你的代码中发现了错误，但我只是想给你一点方向。我发现尽可能将逻辑移入CSS并使用javascript添加和删除类是有用的。这里的优点是你可以轻松地使用CSS来改变不同状态下的外观，而无需更改javascript。这是一个可能的解决方案。

var box = document.getElementById("box");
box.onclick = function() {
  if (box.className.indexOf("clicked") == -1) {
    box.className = "clicked";
  } else {
    box.className = "";
  }
}

#box #time {
  display: none;
}
#box.clicked {
  box-shadow: 1em black;
}
#box.clicked #firstMessage {
  display: none;
}
#box.clicked #time {
  display: block;
}

<div id="box">
  <p id="firstMessage">Click here for the time and date!</p>
  <p id="time">Time to get a watch!</p>
</div>

Answer 3

试试这个

document.getElementById("time").style.boxShadow = null;

在Adobe中，Box shadow不会“无”

3 个答案: