Javascript 背景色不是'；你什么也不做吗？_Javascript_Html_Css

Javascript 背景色不是'；你什么也不做吗？

javascript html css

Javascript 背景色不是'；你什么也不做吗？,javascript,html,css,Javascript,Html,Css,我是JS新手，我正试图在网站上实现它，但就我的一生而言，我不能让backgroundColor做任何事情 let col = document.getElementById('js'); col.addEventListener('mouseover', () => { col.style.backgroundColor = 'blue'; console.log('wow'); }); 我使用的是getElementsByClassName，但为了简单起见，我想我应该改为get

我是JS新手，我正试图在网站上实现它，但就我的一生而言，我不能让

backgroundColor

做任何事情

let col = document.getElementById('js');
col.addEventListener('mouseover', () => {
  col.style.backgroundColor = 'blue';
  console.log('wow');
});

我使用的是

getElementsByClassName

，但为了简单起见，我想我应该改为

getElementById

来尝试诊断发生了什么

当我将鼠标悬停在元素上时，我确实会在控制台中看到“哇”

如果我尝试更改为：

document.main.style.backgroundColor = 'blue';

或者它给了我一个错误：

未捕获的TypeError:无法在处读取未定义的属性“style” HTMLHeadingElement.col.addEventListener（list script.js:14）

我知道这对你们中的一些人来说可能是难以置信的简单，但我只需要一条腿来让球滚起来

我只想更改分配给

Id=“js”

的元素的背景

HTML如下所示：

<body class="container">
  <header>
    <div>
      <a class="header-l" href="./index.html"><img class="header-img" src="./img//arrow-left.png" alt="Lists Arrow"><h1 class="text-style">Lists</h1></a>
    </div>
    <div class="header-c"><h1 id="js">Shopping for lots of things</h1></div>
    <div>
      <a class="header-r" href=""><img class="header-img" src="./img/user.jpg" alt="User Picture"><h1 class="text-style">Username</h1></a>
    </div>
  </header>
  <script src="./list-script.js" type="text/javascript"></script>
  <script> </script>  <!-- stops CSS transitions from firing on load -->
</body>


买很多东西

正如您所见，Id位于h1标记上。当我悬停时，我看不到任何错误，也看不到背景变化。我试过移除，但没有改变

谢谢

这在代码片段中似乎工作正常。我将你的代码逐字复制到这个代码段中。运行此代码段并亲自查看

let col=document.getElementById（'js'）；
col.addEventListener（'mouseover'，（）=>{
col.style.backgroundColor='蓝色'；
console.log（'wow'）；
});

买很多东西
这在代码片段中似乎工作正常。我将你的代码逐字复制到这个代码段中。
运行此代码段并亲自查看

let col=document.getElementById（'js'）；
col.addEventListener（'mouseover'，（）=>{
col.style.backgroundColor='蓝色'；
console.log（'wow'）；
});

买很多东西
您将收到错误消息，因为文档中没有“main”对象
您需要做的是使用document.body
，然后它就会工作

let col=document.getElementById（'js'）；
col.addEventListener（'mouseover'，（）=>{
col.style.backgroundColor='红色'；
});
document.body.style.backgroundColor='蓝色'

买很多东西
您将收到错误消息，因为文档中没有“main”对象
您需要做的是使用document.body
，然后它就会工作

let col=document.getElementById（'js'）；
col.addEventListener（'mouseover'，（）=>{
col.style.backgroundColor='红色'；
});
document.body.style.backgroundColor='蓝色'

买很多东西
啊，对不起。是我的错。问题出在CSS中：
h1 {
  font-size: 2.5em;
  background: -webkit-linear-gradient(100deg, #acaecb 0%, white 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

一旦我用Id='js'瞄准另一个元素，它就工作了
谢谢你的帮助和评论
 啊，对不起。是我的错。问题出在CSS中：
h1 {
  font-size: 2.5em;
  background: -webkit-linear-gradient(100deg, #acaecb 0%, white 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

一旦我用Id='js'瞄准另一个元素，它就工作了
谢谢你的帮助和评论
 因此，由于您使用的是getElementsByClassName
，因此需要在每个元素上循环，并为每个元素应用样式

let col=document.getElementsByClassName（'js'）；
for（设i=0；i{
col[i].style.backgroundColor='blue'；
console.log（'wow'）；
});
}
divone
第二组
第二组
第二组
div two
因此，由于您使用的是getElementsByClassName
，因此需要在每个元素上循环，并为每个元素应用样式

let col=document.getElementsByClassName（'js'）；
for（设i=0；i{
col[i].style.backgroundColor='blue'；
console.log（'wow'）；
});
}
divone
第二组
第二组
第二组
div two
document.main不存在，请尝试使用document.body访问标记use css#js:hover{background color:blue；}
请发布@PranavCBalan我想更改我想悬停的锚定标记的特定子项。JavaScript代码正常。可能您没有id为js
document.main的元素，请尝试使用document.body访问标记use css#js:hover{background color:blue；}
请发布@PranavCBalan我想更改要悬停的锚定标记的特定子项。该JavaScript代码有效。可能您没有id为js
的元素。是的，代码没有问题。是的，代码没有问题。像这样的CSS冲突并不总是容易找到。像这样的CSS冲突并不总是容易找到。