无法读取未定义的属性“样式”——未捕获的类型错误答案

【问题标题】：Cannot read property 'style' of undefined -- Uncaught Type Error无法读取未定义的属性“样式”——未捕获的类型错误
【发布时间】：2017-07-11 03:52:30
【问题描述】：

我想更改 html 页面的 span 元素中文本的颜色、字体大小和字体粗细。

我正在使用以下代码：

if(window.location.href.indexOf("test") > -1){
    var search_span = document.getElementsByClassName("securitySearchQuery");
    search_span[0].style.color = "blue";
    search_span[0].style.fontWeight = "bold";
    search_span[0].style.fontSize = "40px";
}

以下是我的html页面的代码

<h1 class="keyword-title">Search results for<span class="securitySearchQuery"> "hi".</span></h1>

我想通过 id 获取元素，但不幸的是它们只有类，没有 id。我无权更改html代码，只能将js代码添加到外部网站。

我曾尝试查看其他 stackoverflow 帖子，但可以找到解决方案。我是 js 和 css 的新手，请让我知道哪里出错了。

【问题讨论】：

当我在这里尝试时，这有效：jsfiddle.net/du2ot93e - 我认为您的 if 语句失败。
你到达if声明了吗？
该代码有效。您应该寻找的东西：是否存在您想要的 if 条件？您是否在代码的其他位置阅读属性“样式”？代码哪里出错了？
大家好，感谢您的回复。我附上了图片的截图。当我在 Chrome 开发人员工具中使用 Code sn-p 并排除 if 条件时，代码运行良好，但是当我添加 if 条件并将代码插入实际系统时，它给了这个错误，这对我来说有点奇怪
旁注：由于您正在寻找单个元素，您可以使用var span = document.querySelector(".securitySearchQuery");，它返回单个元素，然后只需引用span.style，而无需选择0 索引。跨度>

标签： javascript html css dom javascript-objects

【解决方案1】：

将您的<script> 添加到您的<body> 的底部，或在this StackOverflow question 之后为DOMContentLoaded 添加一个事件侦听器。

如果该脚本在代码的<head> 部分执行，document.getElementsByClassName(...) 将返回一个空数组，因为尚未加载 DOM。

你得到Type Error是因为你引用了search_span[0]，但search_span[0]是undefined。

当您在开发工具中执行它时，这会起作用，因为 DOM 已经加载。

【讨论】：

【解决方案2】：

目前正在运行，我刚刚更改了运算符>以便在sn-p中工作，看看：

window.onload = function() {

  if (window.location.href.indexOf("test") <= -1) {
    var search_span = document.getElementsByClassName("securitySearchQuery");
    search_span[0].style.color = "blue";
    search_span[0].style.fontWeight = "bold";
    search_span[0].style.fontSize = "40px";

  }

}

&lt;h1 class="keyword-title"&gt;Search results for&lt;span class="securitySearchQuery"&gt; "hi".&lt;/span&gt;&lt;/h1&gt;

【讨论】：