捕获元素不起作用的JavaScript函数

Question

因此，我试图创建一个可捕获HTML元素的函数，然后在选择HTML元素后，我尝试通过JavaScript将CSS应用于该元素，但它似乎不起作用。相反，我收到一条错误消息，指出“未捕获的TypeError：无法读取未定义的属性'style'”。我究竟做错了什么？

document.querySelector('h1').style.color = 'brown';

（虽然有效）

Wardrobe.js：

function qSelector(element) {
    document.querySelector(element);
}

qSelector('h1').style.color = 'brown';

index.html：

<html>
    <head>
    </head>
    <body>
        <h1 id="thing">Header 1</h1>
        <script src="Wardrobe.js"></script>
    </body>
</html>

我希望的颜色<h1>是棕色，但仍然是黑色。

Answer 1

您不会从函数中返回元素qSelector（默认情况下会返回undefined，因此Uncaught TypeError: Cannot read property 'style' ofundefined）：

function qSelector(element) {
  return document.querySelector(element);   // <-- return the element
}

qSelector('h1').style.color = 'brown';

<h1 id="thing">Header 1</h1>