javascript - 如何获取具有继承宽度的元素的宽度？

Question

我有一个响应式网站。我还有一些嵌套元素，它们使用百分比 (%) 宽度。现在我想获取子元素的宽度并将其设置为另一个元素的宽度。

注意:我可以获得我需要的那个元素的宽度，并使用 JavaScript 将其设置为另一个元素(类似这样的东西:$('.children')[0 .getBBox().width;).但我想知道，是否可以使用纯 CSS 来做到这一点？

这是我的 HTML 结构和 CSS 代码:

#grandfather {
  width: 70%;
  border: 1px solid #666;
  padding: 5px;
}
.father {
  width: 80%;
  border: 1px solid #999;
  padding: 5px;
}
.children {
  width 90%;
  border: 1px solid #ccc;
  padding: 5px;
}
.follow-width {
  position: absolute;
  border: 1px solid #ccc;
  padding: 5px;
  /* width: ? */
}

<div id="grandfather">
  <div class="father">
    <div class="children">how to get the width of this element?</div>
  </div>
</div>

<br>
<hr>
<br>
<div class="follow-width">
  this element needs to the width of div.children
</div>

Answer 1

不，你不能只在 CSS 中做到这一点。

但是您在版本 8 之前的 Internet Explorer 中有可能:

width: expression(document.getElementById("grandfather").style.width);

#grandfather {
  width: 70%;
  border: 1px solid #666;
  padding: 5px;
}
.father {
  width: 80%;
  border: 1px solid #999;
  padding: 5px;
}
.children {
  width 90%;
  border: 1px solid #ccc;
  padding: 5px;
}
.follow-width {
  position: absolute;
  border: 1px solid #ccc;
  padding: 5px;
  width: expression(document.getElementById("grandfather").style.width);
}

<div id="grandfather">
  <div class="father">
    <div class="children">how to get the width of this element?</div>
  </div>
</div>

<br>
<hr>
<br>
<div class="follow-width">
  this element needs to the width of div.children
</div>