Как выбрать/работать с дочерним элементом элемента. Javascript
У меня есть заголовок в моем html, который имеет два разных класса. В зависимости от того, когда я прокручиваю вниз, он меняется. В CSS вы выбираете потомка с пробелом. В моем случае .navbar .menu-toggler и .nav_sticky .menu-toggler. Мне удалось выбрать .navbar через var h = document.getElementsByClassName(id3)[0]; (id3 является «панелью навигации»), но я хочу изменить стиль .menu-toggler И я не могу писать напрямую .menu-toggler, потому что мне это нужно, когда это относится к классу .navbar. Я слишком усложнил объяснение, но я надеюсь, кто-нибудь может помочь
oH и как я могу добавить класс и удалить класс к элементу
Добро пожаловать в Stack Overflow! Пожалуйста, не редактируйте объявления о решениях в вопросе. Вместо этого создайте себе ответ или примите один из существующих ответов.
Вы можете добавлять или удалять классы, используя element.classList.add('classToBeAdded') и element.classList.remove('classToBeRemoved')
Вы отметили вопрос "jquery". Способ добавления/удаления классов в jQuery — это методы addClass и removeClass. Например: $('#my-element-id').removeClass('a-class').
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, вы можете использовать document.querySelector для доступа к переключателю.
var menuToggler = document.querySelector(".navbar.menu-toggler");
Вы получите элемент с .navbar и .menu-toggler внутри его classList.
Я не думаю, что доступ к дочерним элементам по индексам - хорошая практика. Если ваш HTML-документ будет обновлен, ваш индекс может указывать на другой элемент DOM.
Проверьте этот ответ для получения дополнительной информации https://stackoverflow.com/a/59406548/9517443
кажется действительно хорошим ответом, хотя он не решает мою проблему .. У меня есть <button class = "menu-toggler" onclick = "toggle_visibility('menu','body-remake','navbar')"> и .navbar .menu-toggler{ background:none; width: 35px; border: none; cursor: pointer; outline: none; z-index: 999; position:absolute; left:240px; top:21px; }.
функция toggle_visibility(id3) { var menuToggler = document.querySelector(".navbar.menu-toggler"); if (e.style.left == '0px'){ //e is header// deleted that part menuToggler.style.left = '240px'; } else{ menuToggler.style.left = '15px'; } В основном я хочу, чтобы кнопка двигалась влево
Думаю, я понял. У вас есть что-то с классом ".navbar", которое содержит кнопку с классом ".menu-toggler". В этом случае вы можете использовать следующий фрагмент: button = document.querySelector('.navbar').querySelector('.menu-toggler'); Попробуйте.
Вы пробовали селекторы CSS, такие как «>» (или просто посмотрите на этот вопрос)?