Zmiana koloru menu na transparent w czystym js.

Question

Cześć!
Chciałbym zmienić kolor menu na transparent jednak cały czas wywala mi błąd:" Uncaught TypeError: Cannot read property 'css' of undefined at testScroll ".
 

var menuBackgroundColor = document.getElementById('main-nav');

function testScroll(ek){
    if(window.pageYOffset>400){
    	document.menuBackgroundColor.css("backgroundColor", "transparent");
    }
}
window.onscroll=testScroll;

<nav class="main-nav" id="main-nav">
			<div class="width-container">
				<img src="img/logo.png" alt="logo" class="logo-nav">
				<ul class="menu">
					<li><a href="">HOME</a></li>
					<li><a href="">ABOUT</a></li>
					<li><a href="">SERVICES</a></li>
					<li><a href="">GALLERY</a></li>
					<li><a href="">BLOG</a></li>
					<li><a href="">CONTACT</a></li>
				</ul>
			</div>
		</nav>

Większość odpowiedzi w internecie jest w jquery a staram się zacząć naukę od czystego javascriptu.
O co chodzi?

Answer 1

document.menuBackgroundColor.css("backgroundColor", "transparent");

Po pierwsze to cała ta linijka jest do wyrzucenia. Po co odwołujesz się do dokumentu?  On Ci w tym wypadku szuka właściwości menuBackgroundColor w obiekcie document a taka nie istnieje. No .css(parametr, wlasciwosc) to jest z JQ a piszesz że JQ nie chesz używać.  Nie możesz tak pół na pół albo całe w JQ albo sam JS. Więc najlepiej to ustaw czystym JS normalnie:

 menuBackgroundColor.style.backgroundColor = "transparent";

Answer 2

- używaj let / const zamiast var.

- wywal document przed menuBackgroundColor

- zamień .css na .style.background = "transparent"

- możliwe że będziesz musiał zwrócić rezultat więc dodaj return przed menuBackgroundColor w takim wypadku

Zajęło mi to 30s do wygooglowania 'document style js' z gotowym rozwiązaniem, pewnie 10x mniej czasu niż zadanie tego pytania. Jak chcesz szukać rzeczy związanych z vanilla JS, nie możesz pomijać "js" || "javascript" w wyszukiwaniu, bo większość rzeczy będzie z jQuery.