Question

我的网站上有以下代码

<body>
  <div class="wrapper">
    <div class="wrapper_inner">
      <header class="scroll_top stick transparent">
  <div class="responsive-menu-pro-button">
    <span class="responsive-menu-pro-box">
      <span class="responsive-menu-pro-inner">

我想要的是，如果“标头”中存在类“ light”，则将“ light-buttom”类添加到“ span”中，并且类为“ response-menu-pro-inner” ...因此代码如下：

<body>
  <div class="wrapper">
    <div class="wrapper_inner">
      <header class="scroll_top light stick transparent">
  <div class="responsive-menu-pro-button">
    <span class="responsive-menu-pro-box">
      <span class="responsive-menu-pro-inner light-buttom">

如果代码中没有“ light”类（因为它是在滚动条上添加的），则“ light-buttom”类将被删除，并且该代码将作为第一个。

谢谢

Answer 1

您可以使用classList.contains（）检查标题中是否存在该类，然后使用classList.add（）将“轻键”类添加到范围中。

if (yourHeader.classList.contains("light") {
  yourSpan.classList.add("light-button");
}

要删除“按钮”类，可以使用classList.remove（）

if (!yourHeader.classList.contains("light") {
  yourSpan.classList.remove("light-button");
}

Answer 2

您可以使用一些简单的javascript来实现该目标，

if(document.querySelector(".wrapper header").classList.contains("light")) {
    document.querySelector(".wrapper header.light .responsive-menu-pro-inner").classList.add("light-buttom");
}

您可以阅读有关classList here

的信息

仅在存在其他班级时添加班级

2 个答案: