Как у элемента поменять CSS-свойства?

Question

[Иван Смирнов]

Нужно, чтобы при скролле у ".nav p" менялись свойства css стилей padding с одного значения на другое, я понял что это делается через js свойство .style.свойство и набросал небольшой код, но всё безуспешно:

jQuery(function($) {
    $(window).scroll(function(){
        if($(this).scrollTop()> $("#navbar").position().top )
            document.getElementById('nav p').style.padding = '0.5vw 1vw 0.5vw 0px';
        else
            document.getElementById('nav p').style.padding = '1vw 1vw 1vw 0px';
    });
});

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#menu1" data-href="#menu"><p>МУФТЫ</p></a></li>
    <li><a href="#"><p>ПРАЙС-ЛИСТ<br>КОНТАКТЫ</p></a></li>
    <li><a href="#"><p>ФОТО И<br>ВИДЕО</p></a></li>
    <li><a href="#"><p>СЕРТИФИКАТЫ<br>КАЧЕСТВА</p></a></li>
    <li><a href="#"><p>РЕЗЬБОНАКАТНЫЙ<br>СТАНОК RECO-40C</p></a></li>
  </ul>
</div>

Comments

[Алексей Ярков]

Может вы стили и для id="navbar" покажете?

- - - - - - - - - - - - - - - - - - - - - - -
Расширение для сайта toster.ru:

Toster Tools

https://github.com/yarkovaleksei/toster-tools

Answer 1

[Evgeniy Kvasyuk]

document.getElementById('nav p') - вы тут пытаетесь поиску по Id скормить теги c с классом (причем неправильно)....и зачем, если у вас есть jQuery использовать нативный метод? используйте jQuery.
вот так, например:
$('.nav p').css({padding: '0.5vw 1vw 0.5vw 0px'})

Comments

[Иван Смирнов]

Благодаря вам всё заработало, спасибо!

[Иван Вишневский]

Иван Смирнов: а ещё лучше отказаться от jQuery и воспользоваться document.querySelector().

[Максим Соловьёв]

forgetable: не лучше. Старые браузеры не хотят с ним работать. Недавно на проекте напоролся.

[Evgeniy Kvasyuk]

forgetable: плюс нужно ручками еще делать перебор нодлиста, которые возвращаются querySelector, а jQuery нам сразу дает нужный инструмент

[Иван Вишневский]

Максим Соловьёв: babel?

[Иван Вишневский]

Evgeniy Kvasyuk: it depends. Просто нужно учитывать, что jQuery работает минимум в 2 раза медленнее на всех операциях, и уж для таких простых не стоит ее использовать.

Answer 2

[Alexander Pushkarev]

Если используете jQuery, то используйте его полностью - .css()