2

私は仕事でCMSテンプレート用のカスタムJavascriptに取り組んでいます。<li>ページ上の特定の要素がそのページの「現在」のクラスのみを受け取るようにしたいと思います。したがって、グローバルページヘッドには次のようなものがあります。

<script type="text/javascript">
    function makeCurrent(id) {
      var current = document.getElementById(id);
      current.setAttribute("class", "current"); // for most browsers
      current.setAttribute("className", "current"); // for ie
    }
</script>

次に、個々のページ<head>に、次のようなものがあります。

<script type="text/javascript">makeCurrent("undergraduate")</script>

<ul>このページには、次のようなナビゲーションがあります。

<li id="undergraduate"><a href="...">Undergraduate Program</a></li>
<li id="graduate"><a href="...">Graduate Program</a></li>

etc.

ページをロードすると、クラスが適用されません。Firebugコンソールを見ると、次のエラーメッセージが表示されます。

current is null
(x)  current.setAttribute("class", "current");

私はまだしっかりした生のJavaScriptを書くコツをつかんでいます（jQueryの後で逆に学習します、あなたはそれがどうなるか知っています）、しかし私はそれをJSだけで書きたいです。私が犯しているばかげた初心者の間違いは何ですか？

みんな、ありがとう！

4

5 に答える 5

3

DOMツリーの読み込みが完了する前にJavaScriptを実行すると、nullが返されます。したがって、bodyタグを閉じる前に、最後に関数を呼び出すことをお勧めします。

これが、ほとんどのJavaScriptライブラリがdom-readyイベントをサポートしている理由です。最近のブラウザもこれをサポートしています（domcontentloaded）が、ワイドブラウザのサポートでは、自分でそれを行うのは少し難しいです（まあ、それほど難しくはありませんが、3つまたは4つの異なる方法です）おもう。）

于 2010-09-29T15:27:32.547 に答える
2

そのスクリプトが評価されているとき、要素はまだ存在していません。代わりに、本体のonloadハンドラーなどに配置して、DOMが配置されると実行されるようにします。

マークアップに触れずにこれを行う方法の例：

function callWhenLoaded(func) {
  if (window.addEventListener) {
    window.addEventListener("load", func, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", func);
  }
}

callWhenLoaded(function() { makeCurrent("undergraduate"); });
于 2010-09-29T15:27:18.990 に答える
2

頭の中で走ると、DOMは完全にはロードされませんmakeCurrent。そのスクリプトをタグの後に置く必要があります。<li>

コードを最適化できます。class属性を直接設定できますcurrent.className = 'current';。

于 2010-09-29T15:28:09.383 に答える
1

その理由は、ページの読み込みが完了する前、つまりDOMにデータが入力される前に、スクリプトが実行されているためです。

ページの読み込みが完了した後にのみ関数を呼び出すようにする必要があります。これを行うには、document.onload（）またはbodyタグのonloadイベントを使用してトリガーします。

于 2010-09-29T15:28:56.650 に答える
1

すべての技術的な答えがすでに吐き出された後、私はそれが非常にうまくいく可能性のあるものをすべてスキップし、私が気付いたときに私が直面する原因となったより明白なもののいくつかに行きます：

  • アイデンティティのタイプミス
  • IDは、使用しているWebフレームワークによって生成されているか、部分的に生成されているため、思ったとおりではありません。つまり、ASP.NETでは、クライアントIDを「MyControl」に設定して、レンダリングされるまでにそれを見つけることができます。クライアントでは、「Page_1 $ Control_0 $ MyControl$1」です。
  • たとえば、オブジェクトIDがMyControlの場合、例ではjQueryを使用していませんが、jQueryとCSSでは#MyControlを使用して参照していますが、オブジェクトの実際のID、＃は使用しませんでした。document.getElementById（）では、jQueryやCSSのように＃を使用していませんが、誤って使用した可能性があります。
  • idの代わりにname要素をコントロールに設定しました。

他の人が言っているように、それはあなたがそれを参照しているときに要素が利用可能になるのを待たないことに帰着するかもしれません。

于 2010-09-29T15:34:08.020 に答える