无法读取未定义的属性“样式”——未捕获的类型错误
Posted
技术标签:
【中文标题】无法读取未定义的属性“样式”——未捕获的类型错误【英文标题】：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代码添加到外部网站。
我曾尝试查看其他 *** 帖子，但可以找到解决方案。 我是 js 和 css 的新手，请让我知道哪里出错了。
【问题讨论】：
当我在这里尝试时，这有效：jsfiddle.net/du2ot93e - 我认为您的if 语句失败。
你到达if声明了吗？
该代码有效。您应该寻找的东西：是否存在您想要的 if 条件？您是否在代码的其他位置阅读属性“样式”？代码哪里出错了？
大家好，感谢您的回复。我附上了图片的截图。当我在 Chrome 开发人员工具中使用 Code sn-p 并排除 if 条件时，代码运行良好，但是当我添加 if 条件并将代码插入实际系统时，它给了这个错误，这对我来说有点奇怪
旁注：由于您正在寻找单个元素，您可以使用var span = document.querySelector(".securitySearchQuery");，它返回单个元素，然后只需引用span.style，而无需选择0 索引。跨度>
【参考方案1】：
将您的<script> 添加到您的<body> 的底部，或在this *** 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";
<h1 class="keyword-title">Search results for<span class="securitySearchQuery"> "hi".</span></h1>【讨论】：
以上是关于无法读取未定义的属性“样式”——未捕获的类型错误的主要内容，如果未能解决你的问题，请参考以下文章
数据表（行详细信息）：未捕获的类型错误：无法读取未定义的属性“样式”
未捕获的类型错误：在输入单击时无法读取 null 的属性“样式”
未捕获的类型错误：无法读取未定义的属性 toLowerCase