मैं jQuery के साथ एक डार्क मोड डालने की कोशिश करता हूं लेकिन वह काम नहीं करता है मुझे कुछ मदद चाहिए। मैं आईडी #btntheme के लिए डार्क मोड को क्लिक पर रखना चाहता हूं, लेकिन वह काम नहीं करता है, मैं क्लिक पर रंगीन थीम पर स्विच करने में सक्षम होना चाहता हूं, किसी के पास यह कैसे करना है, इस पर एक आईडी है?

<div class="container">
  <div class="row" style="background:">
    <div class="two columns absolute" style="background: ">
      <a href="home.php"> <img src="../content/logo_tw.png" width="50" height="50" alt="logo"></a><br>
      <a href="home.php"> <img src="../content/home.png" width="20" height="20" alt="home"><strong>Home</strong></a><br>
      <a href="recherche.php"> <img src="../content/loupe.jpg" width="20" height="20"
          alt="recherche"><strong>Search</strong></a><br>
      <a href="messages.php"> <img src="../content/message.png" width="20" height="20"
          alt="messages"><strong>Messages</strong></a><br>
      <a href="profile.php"> <img src="../content/profile.png" width="20" height="20"
          alt="profile"><strong>Profile</strong></a><br>
    </div>
    <div class="ten columns separator border" style="background: ">
      <div class="pseudo">
        <a href="profile.php">
          <h3>Risitas</h3>
      </div>
      </a>
      <hr>
      <div id="fond"></div>
      <div id="avatar">
        <img src="../content/risitasb.jpg">
        <a href="modif_profil.php">  <button id="btnfollow" class="button-primary">Edit profile</button></a>
      </div>
      <form action="profile.php" method="post">
        <button id="btntheme" type="submit" class="button-primary">Theme</button>
        <button id="btncommentaire" class="button-primary">Comments</button>
        <button id="btnretweet" class="button-primary">Retweet</button>
      </form>

  </div>
</div>


</div>
</body>
-2
Eric Ramos 21 फरवरी 2020, 18:50
स्टैक ओवरफ्लो में आपका स्वागत है। क्या आप पूरा कोड साझा कर सकते हैं
 – 
vadivel a
21 फरवरी 2020, 18:53
मेरा सीएसएस वहां पर लोड करना चाहता है
 – 
Eric Ramos
21 फरवरी 2020, 18:56

1 उत्तर

मैंने आपको एक कोडपेन बनाया है: https://codepen.io/billgil/pen/WNvoGjB

मैंने आपके लिए चीजों को सरल रखने के लिए HTML में आवश्यक जावास्क्रिप्ट को जोड़ा। जब आप बटन पर क्लिक करते हैं तो 'डार्क-मोड' क्लास बॉडी टैग में जुड़ जाती है। फिर उस वर्ग के अंदर कुछ भी बहाल करने के लिए प्रदान किए गए CSS उदाहरण का उपयोग करें।

आनंद लेना!

<!-- MY NEW BUTTON TO TOGGLE DARK MODE -->
<button id='jsDarkToggle' onclick={document.body.classList.toggle('dark-mode')}>Dark Mode</button>

<!-- YOUR HTML IN YOUR EXAMPLE -->
<div class="container">
  <div class="row" style="background:">
    <div class="two columns absolute" style="background: ">
      <a href="home.php"> <img src="../content/logo_tw.png" width="50" height="50" alt="logo"></a><br>
      <a href="home.php"> <img src="../content/home.png" width="20" height="20" alt="home"><strong>Home</strong></a><br>
      <a href="recherche.php"> <img src="../content/loupe.jpg" width="20" height="20"
          alt="recherche"><strong>Search</strong></a><br>
      <a href="messages.php"> <img src="../content/message.png" width="20" height="20"
          alt="messages"><strong>Messages</strong></a><br>
      <a href="profile.php"> <img src="../content/profile.png" width="20" height="20"
          alt="profile"><strong>Profile</strong></a><br>
    </div>
    <div class="ten columns separator border" style="background: ">
      <div class="pseudo">
        <a href="profile.php">
          <h3>Risitas</h3>
      </div>
      </a>
      <hr>
      <div id="fond"></div>
      <div id="avatar">
        <img src="../content/risitasb.jpg">
        <a href="modif_profil.php">  <button id="btnfollow" class="button-primary">Edit profile</button></a>
      </div>
      <form action="profile.php" method="post">
        <button id="btntheme" type="submit" class="button-primary">Theme</button>
        <button id="btncommentaire" class="button-primary">Comments</button>
        <button id="btnretweet" class="button-primary">Retweet</button>
      </form>

  </div>
</div>
.dark-mode {
  background: black;
  color: white;
}

.dark-mode a {
  color: white;
}
0
Gene Sy 22 फरवरी 2020, 00:53