Question

我是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：无法在读取未定义的属性“样式” 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标签上。当我悬停时，我看不到任何错误，但也没有背景变化。我尝试删除但没有更改。

谢谢！

Answer 1

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

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

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

Answer 2

AHHHH对不起，所有。我的错。问题出在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'定位了另一个元素，它就起作用了。

感谢您的所有帮助和评论。

Answer 3

您收到错误消息，因为文档中没有“主要”对象。

您需要做的是使用document.body，然后它将起作用。

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

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

Answer 4

因此，由于您正在使用getElementsByClassName，因此需要遍历每个元素并为每个元素应用样式。

let col = document.getElementsByClassName('js');


for (let i = 0; i< col.length; i++) {
  
  col[i].addEventListener('mouseover', () => {
  col[i].style.backgroundColor = 'blue';
  console.log('wow');
});
}

<div class="js"> div one</div>
<div class="js">div two</div>
<div class="js">div two</div>
<div class="js">div two</div>
<div class="js">div two</div>

backgroundColor什么也没做？

4 个答案: