0

我想我可能缺乏对 div 关系的理解？

最终，目标是使“元素” div 在蓝色“父” div 的顶部向下滑动。

但是当前的重点是简单地使其显示（显示最初设置为“无”）。

我不确定为什么这不起作用...

  <style type="text/css">
#parent {
    height: 100px;
    width: 100px;
    background-color: blue;
}

#element {
    height: 50px;
    width: 50px;
    background-color: red;
    display: none;
}
</style>

  <body>
<div id="element"></div>
    <div id="parent" onclick="peekDown('element');"> </div>
  </body>


<script type="text/javascript">
//<![CDATA[
function peekDown(id) {
    var element = document.getElementById(id);
    element.style.display = "";
    console.log(element.style.display);
}
//]]>
</script>
4

2 回答 2

2

假设没有其他错误，以下：

function peekDown(id) {
    var element = document.getElementById(id);
    element.style.display = "";
    console.log(element.style.display);
}

不能工作，因为虽然element.style.display = '';会取消设置在display属性中找到的style属性，但它不会取消设置或影响display样式表中设置的属性。

因此，您需要明确使用display = 'block';：

function peekDown(id) {
    var element = document.getElementById(id);
    element.style.display = "block";
    console.log(element.style.display);
}

相反，您可以将元素className的 更改为display元素：

function peekDown(id) {
    var element = document.getElementById(id);
    element.className = "newClass";
    console.log(element.style.display);
}

这依赖于明确的 CSS 声明.newClass：

.newClass {
    display: block;
}
于 2012-06-10T22:48:57.547 回答
0

将.style.display属性设置为""删除该属性的任何内联样式（您的代码没有任何内联样式）并允许应用样式表中的规则。

改为修改.className属性#element {}并#element.someDescriptiveClass {}在您的样式表中包含 and 。

于 2012-06-10T22:47:40.483 回答