【HTML】JavaScript 简单实现网页元素样式切换

一个陌生朋友

已于 2024-08-31 03:35:16 修改

阅读量736

点赞数 7

文章标签： html javascript 前端

于 2024-08-31 03:34:21 首次发布

本文链接：https://blog.csdn.net/qq_52848404/article/details/141731023

版权

- 如何构建基础的 HTML 结构。
- 如何使用 CSS 定义元素的样式。
- 如何通过 JavaScript 添加交互性，实现点击按钮切换元素样式的功能。
- 如何通过添加 title 属性增强按钮的可用性，并在 JavaScript 中使用这些信息进行调试。

现在，开始一步步地构建这个功能。

一、 HTML 结构设置

构建基础的网页布局，包含一个卡片和三个控制样式的按钮。

<!-- HTML 结构 -->
<div class="container">
  <!-- 其他元素 -->
  <button id="btn1" title="切换到样式1">样式1</button>
  <button id="btn2" title="切换到样式2">样式2</button>
  <button id="btn3" title="切换到样式3">样式3</button>
</div>

上述代码中创建了一个 .container 作为卡片的容器，并在其中放置了三个按钮，每个按钮都有一个 title 属性，用于向用户提供额外的信息。

二、 CSS 样式定义

定义卡片和容器的基础样式，并创建三种不同的样式类。

/* CSS 样式 */
.container {
  /* 样式定义 */
}
.card {
  /* 样式定义 */
}
/* 其他样式类定义 */

CSS 代码负责设置卡片和容器的外观，包括背景颜色、边框、圆角等。还定义了 .morph2 和 .morph3 类，这些类将被 JavaScript 动态添加到元素上以改变其样式。

三、 JavaScript 功能实现

通过 JavaScript 添加交互性，实现点击按钮切换卡片样式的功能。

1：定义元素选择器和切换函数

创建切换类的函数

// JavaScript 函数定义
function toggleClasses(classnames, add) {
  if (!Array.isArray(classnames)) {
    classnames = [classnames];
  }
  for (const key in elements) {
    const element = document.querySelector(elements[key]);
    classnames.forEach(classname => {
      if (add) {
        element.classList.add(classname);
      } else {
        element.classList.remove(classname);
      }
    });
  }
}

说明：toggleClasses 函数是核心，它负责根据传入的参数添加或移除指定的类名。使用 Array.isArray 来检查 classnames 是否为数组，确保函数的灵活性。

2：为按钮添加事件监听器

设置按钮的点击事件监听器

// 事件监听器设置
document.getElementById('btn1').addEventListener('click', function() {
  toggleClasses(['morph2', 'morph3'], false);
});

document.getElementById('btn2').addEventListener('click', function() {
  toggleClasses('morph2', true);
  toggleClasses('morph3', false);
});

document.getElementById('btn3').addEventListener('click', function() {
  toggleClasses('morph3', true);
  toggleClasses('morph2', false);
});

说明：为每个按钮添加点击事件监听器，当按钮被点击时，调用 toggleClasses 函数来切换卡片的样式。通过 this.title 获取按钮的标题属性，并在控制台输出，以便于调试。

4：添加标题名称以增强可用性

通过为按钮添加 title 属性，提供额外的提示信息。

<!-- 带标题的按钮 -->
<button id="btn1" title="切换到样式1">样式1</button>

说明：title 属性为按钮添加了提示信息，当将鼠标悬停在按钮上时，可以看到一个提示框显示按钮的功能。

5：使用标题名称进行反馈

在控制台输出按钮的标题名称，以提供额外的调试信息。

// 使用标题名称进行反馈
document.getElementById('btn1').addEventListener('click', function() {
  console.log(this.title); // 输出按钮标题
  toggleClasses(['morph2', 'morph3'], false);
});

说明：在按钮的点击事件处理函数中，使用 console.log 输出按钮的标题，这有助于开发者理解哪个按钮被点击，并且可以用于调试目的。

内容总结

通过本文章，或许你已经学会了如何使用 HTML、CSS 和 JavaScript 创建一个具有动态样式切换功能的网页。从基础的 HTML 结构开始，通过 CSS 定义了样式，并使用 JavaScript 添加了交互性。此外，还介绍了如何通过添加 title 属性来增强按钮的可用性，并在 JavaScript 中使用这些信息进行调试。希望这个本文章能帮助你更好地理解和应用这些技巧。

完整代码展示

以下是完整的代码示例，包括 HTML、CSS 和 JavaScript 部分：

HTML

<!-- HTML 结构 -->
<div class="container">
  <!-- 其他元素 -->
  <button id="btn1" title="切换到样式1">样式1</button>
  <button id="btn2" title="切换到样式2">样式2</button>
  <button id="btn3" title="切换到样式3">样式3</button>
</div>

CSS

.container {
  /* 样式定义 */
}
.card {
  /* 样式定义 */
}
/* 其他样式类定义 */

/* JavaScript 功能实现 */
const elements = {
  card: '.card',
  container: '.container'
};

JavaScript

function toggleClasses(classnames, add) {
  if (!Array.isArray(classnames)) {
    classnames = [classnames];
  }
  for (const key in elements) {
     const element = document.querySelector(elements[key]);
     classnames.forEach(classname => {
       if (add) {
         element.classList.add(classname);
       } else {
         element.classList.remove(classname);
       }
     });
  }
}

document.getElementById('btn1').addEventListener('click', function() {
  console.log(this.title); // 输出按钮标题
  toggleClasses(['morph2', 'morph3'], false);
});

document.getElementById('btn2').addEventListener('click', function() {
  console.log(this.title); // 输出按钮标题
  toggleClasses('morph2', true);
  toggleClasses('morph3', false);
});

document.getElementById('btn3').addEventListener('click', function() {
  console.log(this.title); // 输出按钮标题
  toggleClasses('morph3', true);
  toggleClasses('morph2', false);
});

希望这个文章内容能帮助你轻松掌握和应用这些技术。

参考代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>WebCat</title>
<style>
html, body {
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

.container {
  position:relative;
  width: 250px;
  height: 500px;
  margin: 10% auto;
  border: 8px solid #3D3B50;
  background-color: #000;
  border-radius: 40px;
  transition: all 1s ease;
}
.container::after {
  position:absolute;
  top: 0;
  left: 50%;
  content: ""; 
  width: 100px;
  height: 20px;
  transform: translate(-50%);
  background-color: #3D3B50;
  border-radius: 0 0 10px 10px;
}
.container::before {
  position: absolute;
  top: 20%;
  right: -12px;
  content: "";
  width: 10px;
  height: 40px;
  background-color: #3D3B50; 
  border-radius: 3px;
} 
.container-n {
  position: absolute;
  top: 35%;
  right: -12px;
  width: 10px;
  height: 70px;
  border-radius: 3px;
  background-color: #3D3B50; 
}
.box {
  position:absolute;
  top: 0;
  width:100%;
  height:100%;
  overflow: hidden;
  border-radius: 32px;
}

.card {
  position:relative;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  margin: 0% auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align:center;
  border-radius: 32px;
  background-color: #000;
  transition: all 1s ease;
}
.card h1 {
  position:absolute;
  top: 40%;
  left: 50%;
  color: #fff;
  width: 100%;
  margin: 0;
  font-size: 3rem;
  font-weight: bold;
  transform: translate(-50%,-50%);
  transition: all 1s ease;
}
.card h2 {
  position:absolute;
  top: -100%;
  left: 50%;
  color: #fff;
  width: 100%;
  margin: 0;
  font-size: 0.7rem;
  font-weight: bold;
  transform: translate(-50%);
  transition: all 1s ease;
}
.card img {
  position:absolute;
  left: -100%;
  bottom: -150%;
  color: #fff;
  width: 5px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
  transform: translate(-50%);
  transition: all 2s ease;
}


.container.morph2 {
  position:relative;
  width: 250px;
  height: 500px;
  margin: 10% auto;
  border: 8px solid #3D3B50;
  background-color: #30DFF4;
  border-radius: 40px;
  transition: all 1s ease;
}
.card.morph2 {
  position:absolute;
  top: 0;
  left: 50%;
  margin: 0% auto;
  width: 100%;
  height: 100%;
  transform: translate(-50%);
  border-radius: 32px;
  background-color: #30DFF4;
}
.card.morph2 h1 {
  position:absolute;
  top: -100%;
  left: 50%;
  color: #fff;
  width: auto;
  margin: 0;
  font-size: 3rem;
  font-weight: bold;
  transform: translate(-50%,-50%);
}
.card.morph2 h2 {
  position:absolute;
  top: 25%;
  left: 50%;
  color: #fff;
  width: 100%;
  margin: 0;
  font-size: 1.7rem;
  font-weight: bold;
  transform: translate(-50%);
  transition: all 1s ease;
}
.card.morph2 img {
  position:absolute;
  left: 50%;
  bottom: 0%;
  color: #fff;
  width: 150px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
  transform: translate(-50%);
  transition: all 1s ease;
}

.container.morph3 {
  position:relative;
  width: 250px;
  height: 500px;
  margin: 10% auto;
  border: 8px solid #3D3B50;
  background-color: #30DFF4;
  border-radius: 40px;
  transition: all 1s ease;
}
.card.morph3 {
  position:absolute;
  top: 0;
  left: 50%;
  margin: 0% auto;
  width: 100%;
  height: 100%;
  transform: translate(-50%);
  border-radius: 32px;
  background-color: #30DFF4;
}
.card.morph3 h1 {
  position:absolute;
  top: -100%;
  left: 50%;
  color: #fff;
  width: auto;
  margin: 0;
  font-size: 3rem;
  font-weight: bold;
  transform: translate(-50%,-50%);
}
.card.morph3 h2 {
  position:absolute;
  top: 25%;
  left: 50%;
  color: #fff;
  width: 100%;
  margin: 0;
  font-size: 1.7rem;
  font-weight: bold;
  transform: translate(-50%);
  transition: all 1s ease;
}
.card.morph3 img {
  position:absolute;
  left: 55%;
  bottom: 0%;
  color: #fff;
  width: 300px;
  margin: 0;
  transform: translate(-50%);
  font-size: 1.5rem;
  font-weight: bold;
  transform: translate(-50%);
  transition: all 1s ease;
}

.container button {
  position: absolute;
  left: 50%;
  bottom: -15%;
  padding: 2px 20px;
  border-radius: 5px;
  border: none;
  color: #fff;
  font-weight: bold;
  background-color: #30DFF4;
  transform: translate(-50%,-50%);
}
.container button:nth-of-type(1) {
  left: 10%;
}
.container button:nth-of-type(3) {
  left: 90%;
}


</style>
</head>
<body>

<div class="container">
  <div class="container-n"></div>
  <div class="box">
    <div class="card">
      <h1> Hello </h1>
      <h2> 美好的一天哇 </h2>
      <img src="01.gif"/>
    </div>
  </div>
  <button id="btn1">样式1</button>
  <button id="btn2">样式2</button>
  <button id="btn3">样式3</button>
</div>


<script>

const elements = {
  card: '.card',
  container: '.container'
};

function toggleClasses(classnames, add) {
  if (!Array.isArray(classnames)) {
    classnames = [classnames];
  }
  for (const key in elements) {
    const element = document.querySelector(elements[key]);
    classnames.forEach(classname => {
      if (add) {
        element.classList.add(classname);
      } else {
        element.classList.remove(classname);
      }
    });
  }
}

document.getElementById('btn1').addEventListener('click', function() {
  toggleClasses(['morph2', 'morph3'], false);
});

document.getElementById('btn2').addEventListener('click', function() {
  toggleClasses('morph2', true);
  toggleClasses('morph3', false);
});

document.getElementById('btn3').addEventListener('click', function() {
  toggleClasses('morph3', true);
  toggleClasses('morph2', false);
});

</script>
</body>
</html>