将使用javascript的css类添加到使用javascript实现的标头

我正在开发一个包含许多html文件的网站，最近我开始使用单独的页眉和页脚html文件，以便通过在我的页面中使用javascript实现它们来节省时间。现在的问题是，所有的页眉和页脚看起来都一样，而在使用这种方便的技术之前，我让页面根据您所在的页面高亮显示（这是通过手动将类添加到不同的

标记来完成的，具体取决于页面（html文件）的内容），但是现在我找不到一种方法来针对一个特定的

，它只针对特定的html来改变它的css。代码如下所示： HTML home.HTML：

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

css如下所示：

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

.home{
background-color:red;
}

我想做的是：

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

$（文档）.ready（函数（）{
document.getElementById（'A_57'）。className='home'；
}); 

---

但我得到一个错误：“TypeError:document.getElementById（…）为null”。当标题已经在my home.html中，并且不是由javascript实现时，一切都可以正常工作，但这不是一个选项。希望任何人都知道解决办法。显然，为每个html使用不同的css文件也不是一个选项——它应该尽可能直截了当且对开发人员友好（聪明和懒惰！）提前谢谢

这是因为元素还不存在。加载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"); 
});

在“complete”回调中设置类名，此回调在执行后处理和HTML插入后执行：

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

---

也许您正试图在加载之前启动javascript函数？函数应该在加载之后启动，但显然情况恰恰相反。我已经有了一个解决方案，虽然我希望有一个更有效的解决方案。这是可行的，但我有许多不同的页面，这意味着我必须在html页面中添加这个脚本，只需更改类名，但是也许有一种方法我可以在一个单独的.js文件中使用这个脚本，通过在我的html页面中添加一些额外的.js来更改这个js的类，或者甚至这个js可以根据我的html页面名称或其他信息进行调整并知道要设置哪个类？是否

header.html

总是包含你上面发布的结构？这不是非常优化的代码，但我已经更新了我的答案，以帮助解决这个问题。加载标题后，它会找到一个带有文本“Home”的锚定链接，并向该锚定链接添加一个“Home”类。

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