如何使用 CSS 和 JavaScript 在喜欢/不喜欢按钮之间切换？

从一个按钮切换到另一个按钮意味着它允许用户在一个窗口之间切换到另一个窗口，它允许启用和禁用某个功能，允许更改设置，并提供更多功能。

但在本文中，我们必须使用 CSS 和 JavaScript 编写一个程序来在喜欢和不喜欢按钮之间切换。

为此，让我们为 HTML、CSS 和 JavaScript 创建三个单独的文件：

HTML 文件 (index.html)

HTML 文件用于创建按钮、标题、标签等。HTML 文件必须使用.html 文件扩展名保存。

以下是 HTML 代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <title>Toggle</title>
</head>
<body>
   <div class="toggle">
      <h3>Toggle between a like/dislike button with CSS and JavaScript?</h3>
      <p>click on the below button to toggle between the like and dislike button</p>
      <button id = 'btn'><i class = "fa fa-thumbs-up"></i></button>
      <div class="like">
         <span id = 'like'>Like<i class = "fa fa-thumbs-up"></i></span>
      </div>
      <div class="dislike">
         <span id = 'dislike'>Dislike<i class = "fa fa-thumbs-down"></i></span> 
      </div>
   </div>
</body>
</html>

CSS 文件 (style.css)

这是 CSS 文件，确保文件名必须使用 .css 扩展名保存。在 CSS 中，我们将编写代码来管理整个 HTML 页面的样式。

以下是将 CSS 文件连接到 HTML 文件的代码片段：

<link rel = ‘stylesheet’ href = ‘style.css’>

以下是 CSS 代码

style.css

*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body{
   display: grid;
   place-items: center;
   height: 100vh;
   overflow-x: hidden;
}

.toggle{
   width: 500px;
   height: 300px;
   border: 5px solid black;
   border-radius: 10px;
}

h3{
   position: relative;
   top: 50px;
   left: 50px;
}

p{
   position: relative;
   top: 60px;
   left: 50px;
}

button{
   width: 100px;
   height: 100px;
   background-color: blue;
   color: white;
   border-radius: 50px;
   font-size: 60px;
   cursor: pointer;
   position: relative;
   left: 200px;
   top: 100px;
}

i{
   width: 100px;
   height: 100px;
   background-color: transparent;
   position: relative;
   top: 10px;
}

span{
   position: relative;
   top: 100px;
   color: green;
   font-weight: 800;
   font-size: 20px;
}

#dislike
{
   position: relative;
   left: 210px;
   color: red;
}

.like{
   position: relative;
   top: -80px;
   left: 50px;
}

.like i{
   position: relative;
   top: 0px;
   left: 10px;
}

.dislike{
   position: relative;
   top: -180px;
   left: 155px;
}

.dislike i{
   position: relative;
   top: 3px;
   left: 10px;
}

JavaScript 文件 (index.js)

在 JavaScript 中，我们将编写代码来管理切换活动，我们将获取按钮并应用一些切换条件。该文件使用 .js 扩展名保存。

以下是将 CSS 文件连接到 HTML 文件的代码片段：

<script src = ‘index.js’></script>

以下是 JavaScript 程序：

index.js

let like = document.querySelector('.fa');
document.getElementById('btn').style.background = 'blue';
like.addEventListener("click", (e)=> {
   let like = document.querySelector('.fa');
   e.target.classList.toggle("fa-thumbs-down");
});

示例

执行上述 HTML、CSS 和 JavaScript 后

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <title>Toggle</title>
   <style>
   *{
         padding: 0;
         margin: 0;
         box-sizing: border-box;
      }

      body{
         display: grid;
         place-items: center;
         height: 100vh;
         overflow-x: hidden;
      }

      .toggle{
         width: 500px;
         height: 300px;
         border: 5px solid black;
         border-radius: 10px;
      }

      h3{
         position: relative;
         top: 50px;
         left: 50px;
      }

      p{
         position: relative;
         top: 60px;
         left: 50px;
      }

      button{
         width: 100px;
         height: 100px;
         background-color: blue;
         color: white;
         border-radius: 50px;
         font-size: 60px;
         cursor: pointer;
         position: relative;
         left: 200px;
         top: 100px;
      }

      i{
         width: 100px;
         height: 100px;
         background-color: transparent;
         position: relative;
         top: 10px;
      }

      span{
         position: relative;
         top: 100px;
         color: green;
         font-weight: 800;
         font-size: 20px;
      }

      #dislike
      {
         position: relative;
         left: 210px;
         color: red;
      }

      .like{
         position: relative;
         top: -80px;
         left: 50px;
      }

      .like i{
         position: relative;
         top: 0px;
         left: 10px;
      }

      .dislike{
         position: relative;
         top: -180px;
         left: 155px;
      }

      .dislike i{
         position: relative;
         top: 3px;
         left: 10px;
      }
   </style>
</head>
<body>
   <div class="toggle">
      <h3>Toggle between a like/dislike button with CSS and JavaScript?</h3>
      <p>click on the below button to toggle between the like and dislike button</p>
      <button id = 'btn'><i class = "fa fa-thumbs-up"></i></button>
      <div class="like">
         <span id = 'like'>Like<i class = "fa fa-thumbs-up"></i></span>
      </div>
      <div class="dislike">
         <span id = 'dislike'>Dislike<i class = "fa fa-thumbs-down"></i></span> 
      </div>
   </div>
   <script>
      let like = document.querySelector('.fa');
      document.getElementById('btn').style.background = 'blue';
      like.addEventListener("click", (e)=>
      {
         let like = document.querySelector('.fa');
         e.target.classList.toggle("fa-thumbs-down");
      });
   </script>
</body>
</html>

正如您在上述程序中看到的，我们使用了 HTML、CSS 和 JavaScript。通过 HTML，我们构建内容页面的结构，CSS 管理整个 HTML 页面的样式。

在 JavaScript 中，我们获取了通过查询选择器在 HTML 中创建的图标。然后，我们使用了 addEventListener 方法和 e.target.classList.toggle 在喜欢和不喜欢按钮之间切换。

更新于：2022年11月2日

2K+ 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.