javascriptを使用してJavaScriptを使用してCSSクラスを追加する（

Question

）

多くのhtmlファイルを含むウェブサイトを開発しています。最近、別々のヘッダーとフッターのhtmlファイルを使用してJavaScriptを使用して時間を節約しています。この問題を解決するには、ヘッダーとフッターはすべて同じように見えますが、この便利なテクニックを使用する前に、ページに応じてハイライトされたページがありました（これは、手動でページを追加することによって行われました。<a>タグファイル）それは）ですが、今私は具体的なHTMLをターゲットにすることだけを対象とする特定の<a>をターゲットにする方法を見つけることができません。コードは次のようになります。 HTMLのhome.html：

<div id="header"></div> 

HTMLのheader.html：

<ul> 
    <li id="LI_56"> 
       <a href="pages/home.html" id="A_57">Home</a> 
    </li> 
    </ul> 

Javascriptが次のようになります。

$(function(){ 
    $("#header").load("header.html"); 
    $("#footer").load("footer.html"); 
}); 

CSSは次のようになります。

.home{ 
background-color:red; 
} 

  <script> 
      $(document).ready(function() { 
      document.getElementById('A_57').className = 'home'; 
      }); 
      </script> 

しかし、私はエラーを取得：と私は何をしようとしたことはある "はTypeError：のdocument.getElementById（...）がnullです"。ヘッダーがすでに私のhome.htmlにあり、javascriptで実装されていない場合、すべて正常に動作しますが、それはオプションではありません。誰もが解決策を知っていることを願っています。各HTMLに異なるCSSファイルを使用することも、明らかにオプションではありません。できるだけストレートでデベロッパーフレンドリー（スマート&怠惰）でなければなりません！ ：） 前もって感謝します！

Answer 1

後処理やHTMLの挿入が行われた後、このコールバックが実行されます。

$(function(){ 
    $("#header").load("header.html", function() { 
     document.getElementById('A_57').className = 'home'; 
    }); 
    $("#footer").load("footer.html"); 
}); 

Answer 2

これは、要素がまだ存在しないためです。 htmlが読み込まれた後にクラスを追加します。 「完全な」コールバックでクラス名を設定し

$(function(){ 
    $("#header").load("header.html", function() { 
     var $homeLink = $('#header').find('a').filter(function() { 
      return $.trim($(this).text()) === 'Home' 
     }); 

     $homeLink.addClass('home'); 
    }); 
    $("#footer").load("footer.html"); 
});