Javascript 无法读取未定义的属性“样式”——未捕获的类型错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42368773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot read property 'style' of undefined -- Uncaught Type Error
提问by sravan kumar
I would like to change the color, fontsize and font weight of the text in a span element of the html page.
我想更改 html 页面的 span 元素中文本的颜色、字体大小和字体粗细。
I am using the following code:
我正在使用以下代码：
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";
}
Following is the code for my html page
以下是我的 html 页面的代码
<h1 class="keyword-title">Search results for<span class="securitySearchQuery"> "hi".</span></h1>
I thought of getting elements by id but unfortunately they only classes and no ids. I do not have access to change the html code but just to add js code to website externally.
我想通过 id 获取元素，但不幸的是它们只有类而没有 id。我无权更改 html 代码，只能从外部将 js 代码添加到网站。
I have tried to look into other stackoverflow posts but could find the solution. Am new to js and css,Please let me know where am going wrong.
我曾尝试查看其他 stackoverflow 帖子，但可以找到解决方案。我是 js 和 css 新手，请告诉我哪里出错了。
回答by J. Titus
Add your <script>to the bottom of your <body>, or add an event listener for DOMContentLoadedfollowing this StackOverflow question.
将您的添加<script>到您的底部<body>，或添加一个事件侦听器以DOMContentLoaded关注此 StackOverflow 问题。
If that script executes in the <head>section of the code, document.getElementsByClassName(...)will return an empty array because the DOM is not loaded yet.
如果该脚本在<head>代码部分执行，document.getElementsByClassName(...)将返回一个空数组，因为 DOM 尚未加载。
You're getting the Type Errorbecause you're referencing search_span[0], but search_span[0]is undefined.
你得到 是Type Error因为你正在引用search_span[0]，但是search_span[0]是undefined。
This works when you execute it in Dev Tools because the DOM is already loaded.
这在您在 Dev Tools 中执行时有效，因为 DOM 已经加载。
回答by Jordi Flores
It's currently working, I've just changed the operator >in order to work in the snippet, take a look:
它目前正在工作，我刚刚更改了运算符>以在代码段中工作，请看：
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>