1. ホーム
  2. javascript

[解決済み] 未定義のプロパティ 'style' を読み取ることができません -- Uncaught Type Error

2022-02-17 15:13:52

質問

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の初心者ですが、どこで間違っているのか教えてください。

解決方法は?

を追加してください。 <script> の下にある <body> のイベントリスナーを追加するか、または DOMContentLoaded 以下 このStackOverflowの質問 .

そのスクリプトが <head> というセクションがあります。 document.getElementsByClassName(...) は空の配列を返します。これは DOM がまだ読み込まれていないためです。

を取得していますね。 Type Error を参照しているからです。 search_span[0] しかし search_span[0]undefined .

Dev Toolsで実行すると、DOMがすでに読み込まれているため、これが動作します。