Question

我正在尝试从 html 中获取元素的样式并尝试在控制台上打印

2022-03-17

262

javascript html css dom

我试图从 html 获取元素的样式并尝试在控制台上打印。在可视化代码中输入样式属性时，我看不到样式选项。它一直显示错误未捕获的 TypeError：无法读取 null 的属性（读取“样式”）在 javascript var element; element = document.querySelector("#header").style.backgroudColor; console.log(element);

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='all.css'>
    <script src="javascript_code.js"></script>
  </head>

  <body>
    <div id="header" class="heading" style="background-color: red;">
      <h1>this is header</h1>
      <h1>this is header2</h1>
    </div>
    <script src="javascript_code.js"></script>
  </body>

  </html>

Answer 1

您已两次包含 javascript 文件，第一次是在 header 中，第二次是在 body 标签的最后一个部分。首先删除其中一个，然后发现 backgroundColor 中有一个拼写错误，如您所见 element = document.querySelector("#header").style.backgroundColor = 'green' ;

Answer 2

您可以像这样使用 document.getElementById('header').style.backgroudColor 。

Adabala Rama Krishna

2022-03-17

Answer 3

我重新启动了计算机，所有代码片段都开始工作了。样式属性现在已开始工作。

shine

2022-03-17