Cannot read property 'style' of undefined

2020-06-10 15:17发布

站内问答 / JavaScript
2082 2 6

I would like to change the color, fontsize and font weight of the text in a span element of the html page.

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

<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.

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.

This is the screenshot of the error which I am getting in Chrome browser

2条回答
爱情/是我丢掉的垃圾
2楼-- · 2020-06-10 16:10

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>

查看更多
0人赞 添加讨论(0) 举报
Anthone
3楼-- · 2020-06-10 16:15

Add your <script> to the bottom of your <body>, or add an event listener for DOMContentLoaded following this StackOverflow question.

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.

You're getting the Type Error because you're referencing search_span[0], but search_span[0] is undefined.

This works when you execute it in Dev Tools because the DOM is already loaded.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)