#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 пикселя;}. Но это должно быть вычислено и добавлено к его стилю динамически.