新学一个JavaScript 的 classList API

一、语法
javascript 复制代码
element.classList.toggle(className);
二、场景用法:

点击一张图片放大再次点击的时候缩小

3、demo代码
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片放大缩小 Demo</title>
  <style>
    .image-container {
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden; /* 超过容器尺寸的部分隐藏 */
      border: 1px solid #ddd;
    }

    .image-container img {
      width: 100%; /* 图片填充容器 */
      transition: transform 0.3s ease-in-out; /* 动画效果 */
    }

    /* 放大后的样式 */
    .image-container.enlarged img {
      transform: scale(1.8); /* 放大1.8倍 */
    }
  </style>
</head>
<body>

  <div class="image-container" id="imageContainer">
    <img src="https://via.placeholder.com/200" alt="点击放大缩小" id="image">
  </div>

  <script>
    // 获取元素
    const imageContainer = document.getElementById('imageContainer');

    // 点击事件
    imageContainer.addEventListener('click', () => {
      // 切换放大缩小效果
      imageContainer.classList.toggle('enlarged');
    });
  </script>

</body>
</html>
相关推荐
He_k8 分钟前
‘js@https://registry.npmmirror.com/JS/-/JS-0.1.0.tgz‘ is not in this registry
开发语言·javascript·ecmascript
星夜98213 分钟前
C++回顾 Day6
开发语言·数据结构·c++·算法
UpUpUp……2 小时前
C++复习
开发语言·c++·笔记
艾莉丝努力练剑3 小时前
深入详解编译与链接:翻译环境和运行环境,翻译环境:预编译+编译+汇编+链接,运行环境
c语言·开发语言·汇编·学习
汪子熙4 小时前
Angular i18n 资源加载利器解析: i18n-http-backend
前端·javascript·面试
天天扭码4 小时前
前端必备 | 一文掌握React的Token管理
前端·javascript·react.js
烛阴4 小时前
用Joi守住数据防线!Node.js/前端必备校验神器入门与进阶
前端·javascript
开发者工具分享5 小时前
Lua 的速度为什么比 Python 快
开发语言·python·lua
蔗理苦5 小时前
2025-05-28 Python&深度学习8——优化器
开发语言·pytorch·python·深度学习·优化器
格子衫-20035 小时前
Java八股-Java优缺点,跨平台,jdk、jre、jvm关系,解释和编译
java·开发语言·jvm