Динамическое вычисление ширины div

#javascript

#javascript

Вопрос:

Вот примеры делений:

 #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 пикселей меньше этого?

Любая помощь очень ценится!

Майк

Комментарии:

1. Еще одно уточнение: для overflow: hidden для работы в разных браузерах мне нужно добавить значение ширины, например: .child {overflow:hidden; margin-left: 10px; width:73px;}. Но я бы хотел, чтобы это вычислялось и добавлялось к его стилю динамически. Например, если я установлю значение ширины <div id= «parent»> равным 83px, дочерний элемент автоматически получит ширину 73px в своем стиле.

Ответ №1:

С помощью jQuery это очень просто. Просто вычтите 10 из what.innerWidth() Здесь:

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

Вы также могли бы сделать это следующим образом:

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

-Это означает, что у вас может быть более одного родителя, без необходимости знать id .

Обычный JS

Вы можете использовать clientWidth свойство объекта HTML-элемента. Вот так:

 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;
  

Надеюсь, это поможет! — Таннер.

Комментарии:

1. Спасибо за ответ, но я ищу решение на JavaScript.

2. Технически jQuery — ЭТО javascript

3. @Rain Lover: jQuery — это javascript. Просто фреймворк javascript. Я действительно не знаю никакого другого способа сделать это.

4. @Rain Lover: Отредактировал мой ответ, пожалуйста, посмотрите.

5. Спасибо за фрагмент, Таннер!

Ответ №2:

Это можно сделать с помощью calc

       width: -webkit-calc(50% - 7px) !important;
      width: -moz-calc(50% - 7px) !important;
      width: calc(50% - 7px) !important;
  

Дополнительная информация и примеры https://developer.mozilla.org/en-US/docs/Web/CSS/calc

введите описание изображения здесь

Ответ №3:

Попробуйте этот css для родительского:

 #parent {
 overflow:auto; height:100px;
 padding: 0 5px 0 5px;
}
  

Комментарии:

1. Спасибо, но это не то, что мне нужно. Я хотел бы динамически добавлять ширину к дочернему стилю на основе его родительской ширины.

Ответ №4:

Вот для чего нужны селекторы в CSS:

 #parent.div {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
}
  

Комментарии:

1. У дочернего элемента уже есть запас. Для того, чтобы overflow: hidden работал в разных браузерах, мне нужно добавить значение ширины, например: .child {overflow:hidden; левое поле: 10 пикселей; ширина: 73 пикселя;}. Но это должно быть вычислено и добавлено к его стилю динамически.