从另一个HTML文件导入的JavaScript更改元素

时间:2018-08-03 15:23:35

标签: javascript html css class getelementbyid

我正在尝试导入一些我确实喜欢以下内容的HTML代码,并且它起作用了!那不是问题,但与此有关。我使用“通用html文件”,然后可以将其导入到我喜欢的任何文档中,然后具有特定的标头。我也可以更改通用代码,所有其他页面也将更改。它节省了我很多工作。

这是我使用来自W3Schools的某些代码导入HTML代码的方式

https://www.w3schools.com/howto/howto_html_include.asp

<body>
    <div w3-include-html="universalHTML/header.html"></div>
    <script src="universalHTML/includeHTML.js"></script>

    <script>
        includeHTML();
    </script>
<body>

上面的代码很完美,很清楚。 这是我的问题

在每个不同的页面中,我都希望它突出显示某个链接(在导入的标题中),这样您就知道您所在的页面,例如,按下标题中的home链接可以使主页链接为红色。当然,这是我从通用html代码导入的标头。

我显然希望标题中的链接具有红色,具体取决于我在哪个页面上。因此,我不能只更改将在所有站点上更改的通用html原因。那不是重点。

我正在尝试通过向链接添加css类,然后使其变为红色来使用Javascript实现红色。

这是我尝试从通用html代码向导入的HTML元素添加类的方式

<script>
    var element = document.getElementById("link_home");
    console.log(element);
    element.classList.add("current_link");
 </script>

它当然不起作用,当我打印出“ element”变量时,它表示为null。因此,它看不到该元素存在,也许是因为其导入了吗? 因此,如何在仍然导入通用HTML的同时实现这一目标。我应该只通过在每个页面中复制相同的标头并手动更改类还是以其他方式来做旧方式吗?

预先感谢

-比约恩

0 个答案:

没有答案