Не удается применить стиль к элементу Javascript для элемента HTML

Question

Я действительно новичок в Javascript, я создаю веб-страницу и хотел, чтобы панель навигации меняла размер при прокрутке пользователя вниз. Это было возможно только при использовании Javascript.

Я сослался на файл. js в моем файле HTML и добавил событие onscroll на панель навигации с помощью функции, которую я определил в файле Javascript. Дело в том, что стиль не применяется. Я уже проверил, действительно ли функция вызывается, добавив console.log () ;. Я узнал, что функция вызывается, но стиль по какой-то причине не применим.

Вот мой HTML

Вот мой JS файл

function navbarSizing() {
    let element = document.getElementById("navbar");

    element.style.color = "blue";
    console.log("This works!");
}

Может кто-нибудь увидеть проблему? Я застрял с этой проблемой в течение нескольких часов. Заранее спасибо!

Answer 1

Первая проблема заключается в том, что nav не имеет полосы прокрутки, поэтому при прокрутке она не получит событие. Попробуйте добавить обработчик событий для элемента body.

Во-вторых, применяемый стиль color не отображается в элементе nav, поскольку он применяется к цвету текста, а элемент nav не имеет текст, он содержит другие элементы. Как вы сказали, что хотите изменить размер, попробуйте, например:

element.style.height = "500px";

Answer 2

Если вы хотите изменить css элемента, используйте можете использовать jQuery. Вот простой пример изменения css с помощью jQuery. Я надеюсь, что это поможет вам ответить или дать представление.

function navbarSizing() {
    let element = $("#navbar").find('ul');
    element.css('background-color', 'red');
    console.log("This works!");
}

В этом примере это изменение цвета фона. Поэтому прежде всего вам нужно найти правильный элемент для применения css. Итак, если вы хотите изменить цвет текста li, сначала вам нужно найти дочерние элементы li элемента ul.

Для получения дополнительной информации вы можете прочитать do c из https://api.jquery.com/ . Кроме того, включите jQuery в ваш html как