Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' 我收到这个错误

Question

我是 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 中遇到此错误：“未捕获的类型错误：Window.getComputedStyle：参数 1 不是对象。” 可能是什么？

Answer 1

您的脚本标签需要移至正文的最后。脚本加载到早期。如果您阅读错误消息。找不到参数

<!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>
    <script src="script.js"></script>
</body>
</html>

Answer 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 已准备好接受检查和访问。

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' 我收到这个错误

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' I am getting this error

html

javascript

css

getcomputedstyle

queryselector