Question

我的目的是将div转换为宽度和高度0，从而逐渐使用户无法看到它。我有以下绝对定位的div：

<div id="main" style="width: 200px; height: 100px; left: 648px; top: 253px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div>

当用户按下close div时，我将以下css类附加到“main”div：

.collapseRecommendation {


 -webkit-transition: all 1.0s ease-in-out;
  -moz-transition: all 1.0s ease-in-out;
  -o-transition: all 1.0s ease-in-out;
  transition: all 1.0s ease-in-out;
}

并在javascript（extjs）代码中将div的宽度和高度设置为0：

 mainDiv.setStyle('width', '0px');
 mainDiv.setStyle('height', '0px');

我还设置了“main”div不同的左侧和顶部位置，它按预期工作。

但是只有“main”div的高度和宽度设置为0，但是内部的div大小不会改变并且它保持在同一个位置并且对用户可见，因此在转换后我有以下内容： / p>

<div id="main" style="width: 0px; height: 0px; left: 348px; top: 153px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div>

如您所见，内部div的大小仍为200x150。它也不会成为大小的原因是什么？谢谢

Answer 1

我们不应该期望孩子div的大小会改变吗？

对于像div这样的块元素，它们的宽度仅取决于父元素的宽度，因为大多数浏览器都会将块元素视为设置width: 100%。但是，当您明确设置样式时，此处理将被覆盖，并且它们的尺寸完全独立于彼此。

This JSFiddle显示嵌套div的行为，但不指定宽度。如果单击div，您将看到它们调整大小。顶部div独立调整大小;底部div保持相同的宽度。同样，这是因为未明确声明宽度。

解决方案是以编程方式更改每个子div的维度。为此，您可以循环遍历子项并设置其所有维度。代码可能类似于：

var children = mainDiv.childNodes;
for( i = 0; i < children.length; i++ ) {
  if ( children[i].nodeType == 1 ) {
    // Do something with children[i]
  }
}

绝对div上的css过渡宽度和高度为0不起作用

1 个答案: