Menu
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.
846
To resolve the "Cannot read property 'style' of null" error, make sure that the DOM element you're accessing the style property on exists. In the example, an element with the provided id does not exist in the DOM, so the getElementById method returns null .
To resolve your TypeError: Cannot read properties of undefined (reading '0') , go through these steps: Ensure you are using the correct variable. Perform a simple check on your variable before using it to make sure it is not undefined. Create a default value for the variable to use if it does happen to be undefined.
The "Cannot read property 'click' of null" error occurs when trying to call the click method on a null value. To solve the error, run the JS script after the DOM elements are available and make sure you only call the method on valid DOM elements.
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.
119
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
