Question

有任何依赖性问题吗？因为我使用唯一的纯javascript没有jquery或任何东西。使用node.js
这是我的代码

window.onload()=function(){
  var left=document.querySelector('.left');
  var right=document.querySelector(".right");

  var container=document.querySelector(".container");   
  console.log(left);
  left.addEventListener('mouseenter',()=>{
      container.classList.add('hover-left');

  })
  left.addEventListener('mouseleave', () => {
      container.classList.remove('hover-left');
  })
  right.addEventListener('mouseenter', () => {
      container.classList.add('hover-right');
  })
  right.addEventListener('mouseleave', () => {
      container.classList.remove('hover-right');
  })
}

<div class="container">
    <div class="split left">
        <h1>The Designer</h1>
        <a href="" class="button">Read more</a>
    </div>
    <div class="split right">
        <h1>The Programmer</h1>
        <a href="" class="button">Read more</a>
    </div>
</div>

Answer 1

我在Chrome上遇到此错误：

Uncaught TypeError: window.onload is not a function

删除括号错误消失了。

但我没知道你的网页应该如何运作。

在此处查找更多信息：

https://stackoverflow.com/questions/29927638/window-onload-work-but-chrome-console-says-uncaught-typeerror-window-onload-is

Answer 2

如果您使用CSS-Selector'选择DOM元素'。'对于类，您可以获得元素列表，而不是可以直接操作的单个元素。

如果左侧，右侧和容器仅在您的页面上出现一次，则最好使用ID：

JS：

window.onload=function(){
    var left=document.getElementById('left');
    var right=document.getElementById("right");

    var container=document.getElementById("container");   
    console.log(left);
    left.addEventListener('mouseenter',()=>{
        container.classList.add('hover-left');

    })
    left.addEventListener('mouseleave', () => {
        container.classList.remove('hover-left');
    })
    right.addEventListener('mouseenter', () => {
        container.classList.add('hover-right');
    })
    right.addEventListener('mouseleave', () => {
        container.classList.remove('hover-right');
    })
}

HTML：

<div id="container" class="container">
   <div class="split" id="left">
      <h1>The Designer</h1>
      <a href="" class="button">Read more</a>
   </div>
   <div class="split" id="right">
      <h1>The Programmer</h1>
      <a href="" class="button">Read more</a>
   </div>
</div>

同样如上面的评论所指出，在设置onload事件时不得使用括号。

Answer 3

如果您的html标记中正在加载任何静态JS文件，请在html正文末尾加载JS。在加载JS之前，文档无法准备就绪，因此文档为空。

document.querySelector（）不起作用

3 个答案: