2016-12-11 2 views
0

, пытаясь выяснить, как найти класс и добавить к нему класс с помощью javascript. все примеры онлайн с идентификатором, мне нужно найти классы. Есть идеи, ребята?Как добавить класс в класс с Javascript, а не JQ

Я добавляю класс после загрузки страницы.

<nav class="menu custom-effect" id="customMenu"> 
        <ul class="menu-list"> 
         <li class="menu-item current_page_item"><a href="#" class="menu__link">Home</a></li> 
         <li class="menu-item"><a href="#" class="menu__link">Who we are</a></li> 
         <li class="menu-item"><a href="#" class="menu__link">What we offer</a></li> 
         <li class="menu-item"><a href="#" class="menu__link">Our news</a></li> 
         <li class="menu-item"><a href="#" class="menu__link">Contact us</a></li> 
        </ul> 
       </nav> 

<script> 
    document.addEventListener("DOMContentLoaded", function(){ 
         // document.getElementById("current_page_item").classList.add("current-page"); 

         var element = document.getElementById("customMenu"); 
         var elementClass = element.getElementsByClassName("current_page_item"); 
         elementClass[0].ClassNames.add("extraClass"); 



         console.log(element); 
         console.log(elementClass); 


        }); 
      </script> 
+1

Какой элемент вы пытаетесь найти и почему у вас есть событие domcontentloaded – Geeky

+0

У меня есть domcontentloaded, потому что я добавляю класс после загрузки страницы, я пытался найти current_page_item, и я понял, как, – ChrisGuru

ответ

2

При поиске класса вы получите массив я понял, а не только один элемент, так что вам нужно Referece элемента и хотят, как он улавливает все классы. answear к коду

<script> 
    var element = document.getElementById("menu-main-menu"); 
        var elementClass = element.getElementsByClassName("current_page_item"); 
        elementClass[0].classList.add("foo"); 
</script> 

реализация ClassList этих методов очень легко теперь, когда я понял вопрос:

// добавляет класс "Foo" в эль

el.classList. добавить ("Foo");

// удаляет класс "бар" Эль-

el.classList.remove ("бар");

// переключает класс "Foo"

el.classList.toggle ("Foo");

// выводит "истина" на консоль, если эль содержит "Foo", "ложь", если не

console.log (el.classList.contains ("Foo"));

// добавить несколько классов в Эль

el.classList.add ("Foo", "Бар");

Смежные вопросы