Question

无法读取未定义的属性“style”——未捕获的类型错误

2017-02-21

142763

javascript html css dom javascript-objects

我想更改 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 的新手，请告诉我哪里出了问题。

Answer 1

将您的 <script> 添加到 <body> 底部，或按照此 StackOverflow 问题为 DOMContentLoaded 添加事件监听器。

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

您收到 类型错误 ，因为您引用了 search_span[0] ，但 search_span[0] 是 未定义 。

当您在 Dev Tools 中执行它时，此方法有效，因为 DOM 已加载。

Answer 2

它目前正在运行，我刚刚更改了运算符 > 以便在代码片段中工作，请看一下：

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";

  }

}

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