无法在“窗口”上执行“getComputedStyle”：参数 1 不是“元素”类型我收到此错误答案

【问题标题】：Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' I am getting this error无法在“窗口”上执行“getComputedStyle”：参数 1 不是“元素”类型我收到此错误
【发布时间】：2022-06-23 18:37:27
【问题描述】：

我是 Javascript 新手，我不知道为什么会出现此错误。这是我的代码：

const bckg = document.querySelector(".bckg");
const compStyle = getComputedStyle(bckg);

body {
    box-sizing: content-box;
    position: relative;
}   
.visible {
    position: relative;
    top: 50px;
    margin: auto;
    background-color: bisque;
    height: 300px;
    width: 600px;
    overflow: hidden;
    

}
.bckg {
    position: absolute;
    left: 0px;
    width: 1200px;
    height: 300px;
    background-image: url("bckg.jpg")
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Game</title>
    <link rel="stylesheet" href="styles.css">
   
</head>
<body>
    <script src="script.js"></script>
    <div class="visible">
        <div class="bckg" id="bckg">
            <div class="player"></div>
            <div class="obstacle"></div>
        </div>
    </div>
</body>
</html>

我在 Mozilla 中遇到的这个错误：“未捕获的 TypeError: Window.getComputedStyle: Argument 1 is not an object。” 会是什么？

【问题讨论】：

你知道这是一个javascript相关的问题，但仍然没有提供任何javascript代码
这能回答你的问题吗？ Change label text using JavaScript

标签： javascript html css queryselector getcomputedstyle

【解决方案1】：

您的脚本标签需要移动到正文的最后。脚本加载到早期。

我在 Mozilla 中遇到的这个错误：“未捕获的 TypeError: Window.getComputedStyle: Argument 1 is not an object。”会是什么？

如果您阅读错误消息，它会说找不到参数。

这是因为浏览器会同步加载 JavaScript 标签。自 JavaScript 首次引入以来，它一直是一个标准。

解决方案sn-p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Game</title>
    <link rel="stylesheet" href="styles.css">
   
</head>
<body>
    
    <div class="visible">
        <div class="bckg" id="bckg">
            <div class="player"></div>
            <div class="obstacle"> 
            </div>
        </div>
    </div>
    <!-- I moved the script to the end of the body -->
    <script src="script.js"></script>
</body>
</html>

添加一个console.log你可能已经看到Window.getComputedStyle的参数确实不是一个对象

const bckg = document.querySelector(".bckg");
console.log(bckg); // will return undefined

您也可以尝试“defer”属性，但是最好将脚本标签移动到正文的末尾，以便与不同的旧浏览器兼容。见https://www.w3schools.com/tags/att_script_defer.asp

另一种选择是使用“DOMContentLoaded”事件 https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

【讨论】：

这个答案如果能清楚地描述问题的原因会更好。
@Tibrogargan 大大改进了我的答案。终于，我得到了足够的积分，可以用我的这个新帐户为帖子投票 =D yay

【解决方案2】：

Delta Boukensha 是对的 - 您的文档尚未完成加载。因此，要么按照 Delta 的建议将脚本放在标记的底部，要么在文档呈现后使用实用函数运行代码，例如：

function whenDOMready( func ) {
  switch( String( document.readyState ) ) {
    case "complete":
    case "loaded":
    case "interactive":
      func();
      break;
    default:
      window.addEventListener("DOMContentLoaded", (e) => func());
  }
}

然后像这样从任何你想要的地方调用它：

let bckg;
let compStyle;

function domReady() {
    bckg = document.querySelector(".bckg");
    compStyle = getComputedStyle(bckg);
    /* ...other code here */
}

whenDOMready( domReady );

此实用程序为您提供了两个好处：

无论何时调用它都会起作用 - 立即调用函数 (func) 或触发 DOMContentLoaded 事件时。如果您只是直接添加事件侦听器，则必须担心它是否已经触发。
保证您的 DOM 已准备好进行检查和访问。

【讨论】：