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.