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

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”类与“ response-menu-pro-inner”类一起添加到“ span”中...因此代码看起来像：

<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 信息

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

问题描述

2 个解决方案

解决方案1
1

解决方案2
1 已采纳 2018-09-29 15:16:47

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

问题描述

2 个解决方案

解决方案1 1

解决方案2 1 已采纳 2018-09-29 15:16:47

解决方案1
1

解决方案2
1 已采纳 2018-09-29 15:16:47