web-dev-qa-db-fra.com

Impossible de lire la propriété 'style' de non défini - Erreur de type non capturée

Je voudrais changer la couleur, la taille et le poids de la police du texte dans un élément span de la page html.

J'utilise le code suivant:

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";
}

Voici le code pour ma page html

<h1 class="keyword-title">Search results for<span class="securitySearchQuery"> "hi".</span></h1>

Je pensais obtenir des éléments par identifiant mais malheureusement, ils ne comprenaient que des classes et aucun identifiant. Je n'ai pas accès pour changer le code html mais juste pour ajouter du code js au site Web en externe.

J'ai essayé de regarder dans d'autres publications de stackoverflow mais j'ai pu trouver la solution. Suis nouveau à js et css, s'il vous plaît laissez-moi savoir où je vais mal.

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

javascripthtmlcssdomjavascript-objects
8
sravan kumar

Ajoutez votre <script> Au bas de votre <body> Ou ajoutez un écouteur d'événement pour DOMContentLoaded à la suite cette question StackOverflow .

Si ce script s'exécute dans la section <head> Du code, document.getElementsByClassName(...) renverra un tableau vide car le DOM n'est pas encore chargé.

Vous obtenez le Type Error Parce que vous faites référence à search_span[0], Mais search_span[0] Est undefined.

Cela fonctionne lorsque vous l'exécutez dans les outils de développement, car le DOM est déjà chargé.

12
J. Titus

Cela fonctionne actuellement, je viens de changer d'opérateur > pour travailler dans l'extrait, jetez un oeil:

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>
2
Jordi Flores