在JavaScript中获取CSS元素实现动画失败，类型错误如何解决？

错误原因 #

你把<script>标签放在了页面头部，浏览器从上到下解析HTML，JS代码执行时，.circle这个DOM元素还没被创建出来，document.querySelector('.circle')返回null，而getComputedStyle需要传入有效的DOM元素，因此触发了类型错误。

三种解决办法 #

• 方法一：把脚本移到页面底部
  将<script>标签放到</body>标签之前，确保DOM元素全部加载完毕后再执行JS：

  <link rel="stylesheet" href="style.css">
  
  ...
  
  <div class="circle"></div>
  
  <script src="bruh.js"></script>
  </body>
  

• 方法二：监听DOM加载完成事件
  修改bruh.js，用DOMContentLoaded事件包裹代码，等DOM全部解析完成后再执行逻辑：

  document.addEventListener('DOMContentLoaded', () => {
    const element = document.querySelector('.circle');
    const style = getComputedStyle(element);
    console.log(style);
  });
  

• 方法三：给script标签加defer属性
  在<script>标签上添加defer属性，脚本会在DOM加载完成后再执行，同时可以保持在页面头部的位置：

  <script src="bruh.js" defer></script>
  <link rel="stylesheet" href="style.css">
  
  ...
  
  <div class="circle"></div>
  

内容的提问来源于stack exchange，提问作者OryxGD