不同 CSS 文件中的不同按钮图像

Question

我的工作是使用按钮将不同的 CSS 文件合并到一个 HTML 文件中。因此，每次单击按钮时 CSS 设计都会发生变化。我通过使用 JavaScript 添加和删除每个 CSS 解决了这个任务。我的问题：我想在每个页面的按钮中使用不同的图像，但到目前为止我只有按钮中 HTML 中的图像。

Javasprict:

 let body = document.body;

 let actionBtn = document.getElementById('action');
 let loveBtn = document.getElementById('love');
 let cartoonBtn = document.getElementById('cartoon');
 let animeBtn = document.getElementById('anime');
 let childrenBtn = document.getElementById('children');

 actionBtn.addEventListener('click', () => {
 body.classList.remove('love','cartoon','anime');
 body.classList.add('action');
 });

HTML:

 <div class="button">
 <button id="action"><img src="action.png" alt="Actionfilm-Bild"></button>
 <button id="love"><img src="love.png" alt="Liebesfilm-Bild"></button>
 <button id="cartoon"><img src="cartoon.png" alt="Cartoon-Bild"></button>
 <button id="anime"><img src="anime.png" alt="Anime-Bild"></button>

Answer 1

this is what happend

     let actionBtn = document.getElementById('action');
     let actionBtnImage = document.getElementById('actionBtnImage');
     let loveBtn = document.getElementById('love');
     let cartoonBtn = document.getElementById('cartoon');
     let animeBtn = document.getElementById('anime');
     let childrenBtn = document.getElementById('children');
     let westernBtn = document.getElementById('western');
     let scaryBtn = document.getElementById('scary');
     let fantasyBtn = document.getElementById('fantasy');
     let quietBtn = document.getElementById('quiet');
     let natureBtn = document.getElementById('nature');

     actionBtn.addEventListener('click', () => {
       body.classList.remove('love','cartoon','anime','children','western','scary','fantasy','quiet','nature');
       body.classList.add('action');
       actionBtnImage.src="action.png";
       loveBtnImage.src="love.png";
       cartoonBtnImage.src="cartoon.png";
       animeBtnImage.src="anime.png";
       childrenBtn.src="children.png";
       westernBtn.src="scary.png";
       fantasyBtn.src="fantasy.png";
       quietBtn.src="quiet.png";
       natureBtn.src="nature.png";
     });

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sarah Schönfelder</title>
    <link rel="stylesheet" href="action.css">
    <link rel="stylesheet" href="love.css">
    <link rel="stylesheet" href="cartoon.css">
    <link rel="stylesheet" href="anime.css">
    <link rel="stylesheet" href="children.css">
    <link rel="stylesheet" href="western.css">
    <link rel="stylesheet" href="scary.css">
    <link rel="stylesheet" href="fantasy.css">
    <link rel="stylesheet" href="quiet.css">
    <link rel="stylesheet" href="nature.css">
    <link rel="stylesheet" href="all.css">
  </head>

  <header>
   <nav>
    <div class="button">
      <button id="action"><img id="actionBtnImage" alt="Actionfilm-Bild"></button>
      <button id="love"><img id="loveBtnImage" alt="Liebesfilm-Bild"></button>
      <button id="cartoon"><img id="cartoonBtnImage" alt="Cartoon-Bild"></button>
      <button id="anime"><img id="animeBtnImage" alt="Anime-Bild"></button>
      <button id="children"><img id="childrenBtnImage" alt="Kinderfilm-Bild"></button>
      <button id="western"><img id="westernBtnImage" alt="Westernfilm-Bild"></button>
      <button id="scary"><img id="scaryBtnImage" alt="Horrorfilm-Bild"></button>
      <button id="fantasy"><img id="fantasyBtnImage" alt="Fantasyfilm-Bild"></button>
      <button id="quiet"><img id="quietBtnImage" alt="Stummfilm-Bild"></button>
      <button id="nature"><img id="natureBtnImage" alt="Doku-Bild"></button>
    </div>
   </nav>
  </header>
<body>
</body>
</html>

Answer 2

好的，所以你必须完全按照我的评论去做，但我会在这里回答以向你展示我的意思。您只需要在 javascript 文件中添加一些内容，并为每张图片添加一个 ID。

HTML:

<button id="action"><img id="actionBtnImage src="action.png" alt="Actionfilm-Bild"></button>

let body = document.body;

let actionBtn = document.getElementById('action');
let actionBtnImage = document.getElementById('actionBtnImage');

actionBtn.addEventListener('click', () => {
       body.classList.remove('love','cartoon','anime','children','western','scary','fantasy','quiet','nature');
       body.classList.add('action');
       actionBtnImage.src="newimage.png";    //Do this for each button image you want to change
});

这当然只是一个按钮，但我认为您应该能够自己完成其他按钮！

不同 CSS 文件中的不同按钮图像

different button images in different CSS files

image

button