js：通过“id”为元素添加样式答案

【问题标题】：js: Add style to element by "id"js：通过“id”为元素添加样式
【发布时间】：2018-07-24 21:30:06
【问题描述】：

我有这个真实的代码：

<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>

但是，如您所见，它不起作用。有什么问题？

【问题讨论】：

你有没有调试过scrolltop是否等于0才能进入if语句？
为什么不直接使用document.getElementById("main-header").style.background-color = "red";？
可能你需要在完成页面加载后检查，只有你必须编写这个脚本。将此脚本标记移动到标记的末尾

标签： javascript jquery styles

【解决方案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");

【讨论】：

或者.style.background-color: "red";

【解决方案2】：

1] 使用“jQuery”而不是“$”

2] 在你的选择器周围加上引号（就像你在上面的例子中那样，但不是在现场）

【讨论】：

@damitj07 答案中的 JS 代码运行速度会稍快一些，因为它不使用 jquery。它也是一个更干净、更正确的代码示例

【解决方案3】：

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

【讨论】：

JS 的答案是更好的解决方案

【解决方案4】：

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

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

【讨论】：

谁投了反对票，请提供理由！打开上面提到的页面并尝试上面我给出的代码，它会工作！
不应该添加这样的cmets
那我怎么知道我的回答有什么问题呢？
JS 答案是一个更好的解决方案，这就是为什么你的答案可能被否决