js: Add style to element by “id”

Question

I have this real code:

<script>
window.onscroll = function() {
    if(document.body.scrollTop == 0) {
$('#main-header').css('background-color', 'red');
    }
}
</script>

In this page: http://temporal-1.d246.dinaserver.com/

I just need to change the background color of the element:

<header id="main-header" .... </header>

But, as you can see, it is not working. What's the problem?

Answer 1

When I perform Scroll down action on your site. Following error is printed on the console :

(index):200 Uncaught SyntaxError: Invalid or unexpected token

For the statement below :

$(header#main-header).css('background-color', 'red');

Now when I tried doing this using just JS it works fine. Just open the console and try it out.

document.getElementById("main-header").setAttribute("style","background-color:red");

Answer 2

1] Use "jQuery" instead of "$"

2] Put quotes around your selector (as you have it in example above, but not on site)

Answer 3

尝试将其包装在哈希中： $('#main-header').css({'background-color': 'red'}) ;

Answer 4

After opening your URL which you have mentioned as your page( http://temporal-1.d246.dinaserver.com/ ) - I tried in console with below code, it worked!

<script>
window.onscroll = function() {
    if(document.body.scrollTop == 0) {
        jQuery('#main-header').css('background-color', 'red');
    }
}
</script>