Question

我想我可能对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>

Answer 1

假设没有其他错误，请执行以下操作：

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

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

.newClass {
    display: block;
}

Answer 2

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

修改.className属性，并在样式表中添加#element {}和#element.someDescriptiveClass {}。

element.style.display =“”没有透露div（还有一个父div）

2 个答案: