动态计算div宽度

Question

以下是示例部门:

#grandparent {
  width: 100px;
}
#parent {
  overflow: auto;
  height: 100px;
}
.child {
  overflow: hidden;
  margin-left: 10px;
}

<div id="grandparent">

  <div id="parent">

    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>
    <div class="child">1000000000000000000000000</div>

  </div>

</div>

的<div class="child">宽度值总是小于10个像素<div id="parent">宽度的值.如何计算任何宽度值<div id="parent">,它的孩子比那个小10个像素？

很感谢任何形式的帮助!

麦克风

Answer 1

使用jQuery,这非常简单.从what.innerWidth()这里减去10 :

$(".child").css('width', $('#parent').innerWidth()-10);

你也可以这样做:

$(".child").each(function(){
    $(this).css('width', $(this).parent().innerWidth()-10);
});

- 这意味着你可以拥有一个以上的父母,而不必知道id.

普通的JS

您可以使用clientWidthHTML元素对象的属性.像这样:

var targetParent = document.getElementById('parent'); // or whatever
var targets = targetParent.getElementsByClassName('child');
for(var i=0;i<targets.length;i++) targets[i].parentNode.style.width = targets[i].clientWidth - 10;

希望这可以帮助! - 坦纳