Javascript语法在JQuery中不起作用

Question

我尝试使用JS更改样式。

第一种方法是JQuery，它确实有效。注：我有多个.slider__content div。

$(window).scroll(function() {
    var wScroll = $(this).scrollTop();

    $('.slider__content').css({
      'transform' : 'translate(0px, -'+ wScroll /2 +'%)'
    });
});

但是第二种语法返回＆＃39; slideBG.style未定义＆＃39;在浏览器控制台上。

$(document).ready(function() {
    .
    .
    .
    window.addEventListener('scroll', function() {
        var wScroll = this.pageYOffset;
        var slideBG = document.querySelectorAll('.slider__content');
        slideBG.style["transform"] = 'translateY(' + window.pageXOffset /2 + "%)";
    });
});

为什么会这样？