js：按"id"为元素添加样式

Question

我有这个真实的代码：

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

在此页面中：http：//temporal-1.d246.dinaserver.com/

我只需要更改元素的背景颜色：

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

但是，如您所见，它无法正常工作。有什么问题？

Answer 1

当我在您的网站上执行滚动操作时。在控制台上打印以下错误：

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

对于以下语句：

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

现在，当我尝试使用JS执行此操作时，它可以正常工作。只需打开控制台并尝试一下即可。

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

Answer 2

1]使用" jQuery"代替" $"

2]在选择器周围添加引号(如上所述，但在现场不使用(

Answer 3

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

Answer 4

打开您提到的网址后(http://temporal-1.d246.dinaserver.com/( - 我尝试使用以下代码的控制台，它奏效了！

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