Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.03.2020, 07:48
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 104

Заисимость стиля элемента от предыдущего
Приветствую, гуру 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 третьему?
Ответить с цитированием
  #2 (permalink)  
Старый 04.03.2020, 07:51
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,200

samdo, ты лучше расскажи какой эффект хочешь получить в итоге... А то, может, ты роешь подземный ход на чердак.
Ответить с цитированием
  #3 (permalink)  
Старый 04.03.2020, 08:12
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 104

Сообщение от ksa Посмотреть сообщение
samdo, ты лучше расскажи какой эффект хочешь получить в итоге... А то, может, ты роешь подземный ход на чердак.
Эти элементы - это всплывающие сообщения, которые появляются и через несколько секунд исчезают (присваивается стиль opacity:0). Цель такая, что если появляется одновременно 2 или 3 сообщения, то они не должны наслаиваться друг на друга а распологаться один под другим. Загвоздка в том, что если каждое последующее сообщение появляется тогда, когда у другого уже присвоился opacity: 0, то оно расположено выше чем нужно и в итоге может появиться не слева внизу (position: fixed;left: 20px;bottom:20px), а слева посередине, поэтому и нужна зависимость, что если у первого opacity: 0, то у второго bottom: 20px не меняется, а если он еще не успел перейти в opacity: 0, то расположить второй элемент над ним, т.е. bottom: 40px
Ответить с цитированием
  #4 (permalink)  
Старый 04.03.2020, 09:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,200

Помимо прозрачности можно еще менять размеры... Тогда элементы будут располагаться где нужно...

Это я все к тому, что нет селектора ЦСС, который бы определялся по свойствам ЦСС другого элемента.
Посему, придется тебе придумывать другие решения по стилям. Или писать программки...
Ответить с цитированием
  #5 (permalink)  
Старый 04.03.2020, 09:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,102

samdo,
скрыли/открыли элемент, прошли циклом по видимым, присвоили bottom i * 20 ;
Ответить с цитированием
  #6 (permalink)  
Старый 04.03.2020, 09:41
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 104

Сообщение от рони Посмотреть сообщение
samdo,
скрыли/открыли элемент, прошли циклом по видимым, присвоили bottom i * 20 ;
Вот вот... такое решение и ищется
Ответить с цитированием
  #7 (permalink)  
Старый 04.03.2020, 09:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,102

Сообщение от samdo
такое решение и ищется
в чём проблема?
Ответить с цитированием
  #8 (permalink)  
Старый 04.03.2020, 12:26
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 104

Сообщение от рони Посмотреть сообщение
в чём проблема?
В написании скрипта, который такой цикл реализует.
Ответить с цитированием
  #9 (permalink)  
Старый 04.03.2020, 12:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,102

samdo,
информации недостаточно а цикл будет такой ...
divs.forEach((div, i) => div.style.bottom = `${i * 20}px`)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Присвоение элементу класс предыдущего элемента Daillyn jQuery 7 03.12.2018 19:30
установка стиля элемента по событию gazman Общие вопросы Javascript 9 03.05.2016 14:17
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28
Получение стиля элемента. BreatheInTheVoid Элементы интерфейса 4 01.05.2010 17:25
передача значения предыдущего элемента ani_jery jQuery 1 16.10.2009 17:24