如何获得具有继承宽度的元素的宽度？

Shafizadeh 发表于 Dev

沙菲扎迪

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

注意：我可以获取所需元素的宽度，然后使用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>

编码器Pi

不，您不能仅在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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。