Как получить класс в HTML-скрипт? - PullRequest
Новая
       16

Как получить класс в HTML-скрипт?

0 голосов
/ 15 марта 2019

Я хочу уменьшить навигационную панель, когда прокручиваю заголовок.До сих пор я заставлял навигационную панель придерживаться вершины, как и планировалось, но я не могу понять, как получить доступ к «#navbar a» через второй скрипт.

Как вы видите, мне удалось просто реализовать 'navbar '(который не показан), но как только я попытался реализовать' #navbar a ', мне стало очень трудно, поэтому мне нужен вопрос.Как я могу создать переменную '#navbar a'?

Первый файл / css / style: 

#navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      width: 25%;
      text-decoration: none;
      font-size: 35px;
    }

Второй скрипт 

 window.onscroll = function() {myFunction()};

    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
            navbar.style.align = 'auto';
            navbar.style.padding = '0px';
            navbar.style.width = '100%';
      } else {
        navbar.classList.remove("sticky");
          navbar.style.width = '80%';
          navbar.style.padding = '0, 10px';
      }
    }

1 Ответ

1 голос
/ 15 марта 2019

Вы должны назначить класс или идентификатор тегу и выбрать класс, используя этот идентификатор или класс 

var navLink = document.getElementById("navbar").getElementsByClassName("class-name"); 
/* This will return an array
You can either use Foreach or access array elements.
*/


navLink[0].textContent = "Text Changed ";
navLink[1].style.color = "red ";
navLink[2].style.color = "Blue ";
<div id="navbar">
       <a class="class-name">Change First text</a>
       <a class="class-name">Change Second text</a>
       <a class="class-name">Change Third text</a>
    </div>

Также другой лучший вариант - начать использовать jQuery. Так что вы можете легко сделать что-то вроде

var navLink = $ ('# navbar a')

...