Javascript 在html中添加CSS属性_Javascript_Html_Css

Javascript 在html中添加CSS属性

javascript html css

Javascript 在html中添加CSS属性,javascript,html,css,Javascript,Html,Css,我正在创建一个网站，其菜单栏存储在另一个文件中（解决方案来自）。我还将css存储在一个单独的文件中，链接到菜单栏：如果是当前页面，我网站上的每个页面都会突出显示。然而，由于我的html是在一个单独的文件中，我不能仅仅添加class=“current”或类似的内容。这就是我想到的：选择添加所有所需css的第n个子项，将css添加到每个站点如果我改变元素的顺序，一切都会一团糟以后有更好的方法添加css吗？您可以在每个页面的正文中添加一个id，在每个菜单项中添加另一个，然后在菜单id包含

我正在创建一个网站，其菜单栏存储在另一个文件中（解决方案来自）。我还将css存储在一个单独的文件中，链接到菜单栏：

如果是当前页面，我网站上的每个页面都会突出显示。然而，由于我的html是在一个单独的文件中，我不能仅仅添加

class=“current”

或类似的内容。这就是我想到的：

选择添加所有所需css的第n个子项，将css添加到每个站点

如果我改变元素的顺序，一切都会一团糟

以后有更好的方法添加css吗？

您可以在每个页面的正文中添加一个

id

，在每个菜单项中添加另一个，然后在菜单

id

包含在其关联的正文

id

中时应用突出显示样式

例如，如果您有一个关于页面，您将使用：

<body id="about-page">

</body>

我使用了一个类似于我的网站页面布局的id方案，并应用了一个javascript函数，将查询拆分为多个部分，并将css添加到所需的id中

















var path=window.location.pathname；
如果（路径=“/”）{
document.getElementById（“home”）.style.background=“#27e8e8”；
}否则{
var sections=path.split（“/”）；
对于（变量i=1；i


<ul class="menu">
  <li id="main"><a hef="/">My page</a></li>
  <li id="shop"><a hef="/">Shop</a></li>
  <li id="about"><a hef="/">About me</a></li>
</ul>

.menu {
  /* menu styles */
}

#main-page #main, #shop-page #shop, #about-page #about {
  /* styles for highlight the current page */
}

<link rel="stylesheet" href="menu.css" type="text/css"/>
<nav id="menu_wrap">
      <ul>
        <li><a id="home" href="/">Home</a></li>
        <li><a id="school" href="">School</a>
          <ul>
            <li><a id="trinomial" href="https://reteps.tk/school/trinomial_calculator">Trinomial Calculator</a></li>
            <li><a id="radical" href="https://reteps.tk/school/radical_calculator">Radical Calculator</a></li>
            <li><a id="grades" href="https://reteps.tk/school/grades_calculator">Grade Calculator</a></li>
            <li><a id="trig" href="https://reteps.tk/school/trig_calculator">Trig Calculator</a></li>
            <li><a id="kahoot" href="https://reteps.tk/school/kahoot_bot">Kahoot Bot</a></li>
          </ul>
        </li>
        <li><a href="/blog/home">Blog</a></li>
        <li><a href="/other">Other</a></li>
        <li><a href="https://github.com/reteps">Github</a></li>
      </ul>
</nav>
<script>
  var path = window.location.pathname;
  if (path == "/") {
    document.getElementById("home").style.background = "#27e8e8";
  } else {
    var sections = path.split("/");
    for (var i = 1;i < sections.length;i++) {
      document.getElementById(sections[i].split("_")[0]).style.background = "#27e8e8";
    }
  }
</script>