04.03.2020, 07:48
|
Кандидат Javascript-наук
|
|
Регистрация: 27.05.2017
Сообщений: 112
|
|
Заисимость стиля элемента от предыдущего
Приветствую, гуру js)
Подскажите, как можно сделать стиль одного элемента зависимым от другого. Например, есть вот такая конструкция:
<div class="ok" style="opacity:0;">1</div>
<div class="ok" style="opacity:1;">2</div>
<div class="ok" style="opacity:1;">3</div>
Можно ли как-то сделать, что если у первого элемента opacity: 1, то последующим двум присвоить стили bottom: 40px (второму) и bottom: 80px (третьему), а если у первого opacity:0 (как сейчас в примере выше указано) , то bottom: 0 второму и bottom: 40px третьему?
|
|
04.03.2020, 07:51
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,230
|
|
samdo, ты лучше расскажи какой эффект хочешь получить в итоге... А то, может, ты роешь подземный ход на чердак.
|
|
04.03.2020, 08:12
|
Кандидат Javascript-наук
|
|
Регистрация: 27.05.2017
Сообщений: 112
|
|
Сообщение от ksa
|
samdo, ты лучше расскажи какой эффект хочешь получить в итоге... А то, может, ты роешь подземный ход на чердак.
|
Эти элементы - это всплывающие сообщения, которые появляются и через несколько секунд исчезают (присваивается стиль opacity:0). Цель такая, что если появляется одновременно 2 или 3 сообщения, то они не должны наслаиваться друг на друга а распологаться один под другим. Загвоздка в том, что если каждое последующее сообщение появляется тогда, когда у другого уже присвоился opacity: 0, то оно расположено выше чем нужно и в итоге может появиться не слева внизу (position: fixed;left: 20px;bottom:20px), а слева посередине, поэтому и нужна зависимость, что если у первого opacity: 0, то у второго bottom: 20px не меняется, а если он еще не успел перейти в opacity: 0, то расположить второй элемент над ним, т.е. bottom: 40px
|
|
04.03.2020, 09:11
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,230
|
|
Помимо прозрачности можно еще менять размеры... Тогда элементы будут располагаться где нужно...
Это я все к тому, что нет селектора ЦСС, который бы определялся по свойствам ЦСС другого элемента.
Посему, придется тебе придумывать другие решения по стилям. Или писать программки...
|
|
04.03.2020, 09:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
samdo,
скрыли/открыли элемент, прошли циклом по видимым, присвоили bottom i * 20 ;
|
|
04.03.2020, 09:41
|
Кандидат Javascript-наук
|
|
Регистрация: 27.05.2017
Сообщений: 112
|
|
Сообщение от рони
|
samdo,
скрыли/открыли элемент, прошли циклом по видимым, присвоили bottom i * 20 ;
|
Вот вот... такое решение и ищется
|
|
04.03.2020, 09:52
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
Сообщение от samdo
|
такое решение и ищется
|
в чём проблема?
|
|
04.03.2020, 12:26
|
Кандидат Javascript-наук
|
|
Регистрация: 27.05.2017
Сообщений: 112
|
|
Сообщение от рони
|
в чём проблема?
|
В написании скрипта, который такой цикл реализует.
|
|
04.03.2020, 12:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
samdo,
информации недостаточно а цикл будет такой ...
divs.forEach((div, i) => div.style.bottom = `${i * 20}px`)
|
|
|
|