Javascript 仅当存在其他类时添加类_Javascript_Jquery_Css_Wordpress_Class

Javascript 仅当存在其他类时添加类

javascript jquery css wordpress class

Javascript 仅当存在其他类时添加类,javascript,jquery,css,wordpress,class,Javascript,Jquery,Css,Wordpress,Class,我的网站上有以下代码 <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">

我的网站上有以下代码

<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">

我想要的是，如果在“header”中存在类“light”，则在“span”中添加一个类“light buttom”，并使用类“responsive 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”将被删除，代码将作为第一个

谢谢

您可以使用classList.contains（）检查标题中是否存在该类，然后使用classList.add（）将“light button”类添加到span中

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

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

您只需使用一点简单的javascript即可实现这一点，如下所示：

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

您可以阅读关于

classList

您没有做的事情的可能重复之处是请更新您的问题，以显示您已经尝试过的内容，并显示您在某个问题中面临的具体问题。有关更多信息，请参阅，并为避免jquerykudos避免jquery而感到荣幸

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