javascript - Dynamically calculate a div width -

here sample divisions:

#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>

the <div class="child"> width value 10 pixels less <div id="parent"> width value. how can calculated width value given <div id="parent">, child gets 10 pixels less that?

any appreciated!

mike

with jquery, easy. subtract 10 what.innerwidth() here:

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

you this:

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

-which means have more 1 parent, without having know id.

normal js

you can use clientwidth property of html element object. this:

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; 

hope helps! - tanner.