web-dev-qa-db-ja.com

未定義のプロパティ 'style'を読み取れません-Uncaught Type Error

HTMLページのspan要素内のテキストの色、フォントサイズ、フォントの太さを変更したいと思います。

私は次のコードを使用しています：

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

以下は私のHTMLページのコードです

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

IDで要素を取得することを考えましたが、残念なことに、それらはクラスのみでIDはありません。 HTMLコードを変更するアクセス権はありませんが、外部でWebサイトにjsコードを追加するだけです。

私は他のstackoverflowの投稿を調べようとしましたが、解決策を見つけることができました。 jsとcssが初めてで、どこがおかしいのか教えてください。

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

javascripthtmlcssdomjavascript-objects
8
sravan kumar

_<script>_を_<body>_の下部に追加するか、 このStackOverflowの質問 の後にDOMContentLoadedのイベントリスナーを追加します。

そのスクリプトがコードの_<head>_セクションで実行される場合、DOMがまだロードされていないため、document.getElementsByClassName(...)は空の配列を返します。

_Type Error_を参照しているため_search_span[0]_を取得していますが、_search_span[0]_はundefinedです。

これは、DOMがすでにロードされているため、Dev Toolsで実行すると機能します。

12
J. Titus

現在動作しています。演算子を変更しました>スニペットで作業するために、見てください：

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