0

ユーザーが入力した単語のすべてのインスタンスを強調表示したい HTML ページ (タグの種類を共有しない) にいくつかの要素があります。私の考えでは、replace 関数を使用して say "fox" のすべてのインスタンスを

<font class='highlight'>fox</font>

私の質問は、これらの要素を識別できるようにするにはどうすればよいですか? クラスを使用しようとしましたが、会社のバージョンの IE は getElementsByClassName をサポートしていません。誰かがそれを行うためのより良い方法を知っていますか?

私のページがどのように見えるかの例

<body>
    <h1>All about foxes</h1>
    <font>I'm a fox</font>
</body>

それらがどのように異なるタイプのタグであるかを強調するためです。その例で、ユーザーが「fox」と入力すると、h1 タグの fox と font タグが強調表示されます。明らかに、すべてのメンバーを取得できるグループの一部として h1 と font タグを識別するために何かを使用する必要があります。

ページに表示されるコンテンツも動的に決定されるため、Javascript を使用してこれを行う方法が必要です。

編集: 前のコード例への追加。 

<body>
    <h1>All about foxes</h1>
    <font>I'm a fox</font>
    <h3>I'm not a fox</h3>
</body>

h1 と font タグを明確にマークする方法が必要です (すべての h1 と font をマークする必要があるとは言いません)。これにより、それらが強調表示され、h3 は表示されなくなります (ページ上の fox の他のインスタンスと同様)。さらに、外部の JS ファイルを自分の環境 (またはその外部ファイル) に含めるのは面倒です。そのため、JQuery を使用する必要がなければ、それを好むでしょう。

4

1 に答える 1

1

すでにclass='highlight'適切な場所にいる場合は、次のものを使用できます。これは機能的には と同等getElementsByClassNameです。

elems = document.getElementsByTagName("*");
for ( i=0; i<elems.length; i++ )
{
  if ( elems[i].className == "highlight" )
     { elems[i].style.backgroundColor = "yellow"; }
}

例: http://jsfiddle.net/XU8Qz/

背景色を黄色に設定する代わりに、必要なスタイル変更を行うだけです。

于 2013-07-26T18:17:36.143 に答える