【每日一题】一个div块，设置其为两个效果，一个为渐隐效果，一个为点击空白处显示和隐藏

最新推荐文章于 2024-10-30 14:28:30 发布

AngleCavalier

最新推荐文章于 2024-10-30 14:28:30 发布

阅读量191

点赞数

分类专栏：每日一题前端文章标签： js css 面试

本文链接：https://blog.youkuaiyun.com/qq_43464088/article/details/114464343

版权

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

每日一题

5 篇文章

订阅专栏

这篇博客展示了如何使用HTML、CSS和JavaScript来创建一个简单的div元素，该元素在点击时能够实现渐隐渐现的效果。通过监听'click'事件并调整元素的opacity属性，实现了过渡动画。这是一个基础的前端交互实例，适合初学者了解网页动态效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>div渐隐渐现</title>
  </head>
  <style>
    #toggole {
      transition: all 1s ease-in;
    }
  </style>
  <body>
    <div id="toggole">hello</div>
  </body>
  <script>
    document.addEventListener('click', display);
    function display() {
      var obj = document.getElementById('toggole');
      if (obj.style.opacity === '0') {
        obj.style.opacity = '1';
      } else {
        obj.style.opacity = '0';
      }
    }
  </script>
</html>