11-基于JS实现点击效果

小白爱吃糖果

于 2024-08-28 23:09:44 发布

阅读量230

点赞数 3

分类专栏：前端JavaScript学习路线从0开始文章标签： javascript 前端 css3 开发语言学习 js

本文链接：https://blog.csdn.net/weixin_62549312/article/details/141652120

版权

前端JavaScript学习路线从0开始专栏收录该内容

13 篇文章 0 订阅

订阅专栏

    传统基于操作DOM的方式实现业务需求
    1、想操作谁就先获取谁
    2、给某元素绑定某事件
    3、在事件触发的时候修改元素的样式等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标滑过显示详情</title>
    <!-- IMPORT CSS -->
     <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            /* CSS3新盒子模型属性：控制Width/height 是盒子的最终宽高 */
            box-sizing: border-box;
            margin: 20px auto;
            width: 200px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid lightcoral;
            /* 设置鼠标是一个小手 */
            cursor: pointer;
        }


        .box .detail {
            position: absolute;
            right: -1px;
            top: 38px;
            z-index: -1;
            box-sizing: border-box;
            width: 500px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid lightcoral;

        }

        /* 如果是点击实现显示，不需要基于JS也可以，可以基于：target实现手风琴的效果 */
        
     </style>
</head>
<body>
    <!-- 基于CSS实现，我们需要让详情区域是按钮的子元素 -->
    <div class="box" id="box">
        <span>购物车</span>
        <div class="detail" id="detail" style="display: none;">
            购物车的相关信息
        </div>
    </div>


   下面很重要重要重要！！！！！！！！！！！！

 <!-- 
        传统基于操作DOM的方式实现业务需求
        1、想操作谁就先获取谁
        2、给某元素绑定某事件
        3、在事件触发的时候修改元素的样式等
    -->
    
    <!-- IMPORT JS -->
    <script>
        /* 1、想操作谁就先获取谁 */
        //document.getElementById([ID])  getElementById:在整个文档中，通过元素的ID获取当前这个元素对象
        let box = document.getElementById('box'); //创建一个叫'box'的变量用来存储基于getElementById获取到的这个元素对象
        let detail = document.getElementById('detail');


        /* 2、给某元素绑定某事件 */
        //元素对象.onxxx = function(){} : 事件绑定，xxx事件类型（click / mouseover /mousedown/keydown...)
        box.onclick = function(){
            //当点击（click)box这个盒子(box)的时候，做什么事情（function函数)

            // console.log('哈哈'); 测试

            // 元素对象.style.xxx ：修改元素的某一个样式值(操作的是元素的行内样式，如果我们没有把样式写在行内上，在JS中基于.style.xxx的方式是无法获取到样式的)

            //1、首先获取detail原有的显示样式（显示还是隐藏）: 元素.style.xxx就是获取某一个样式(前提：需要在元素行内设置这个样式才能获取到)
            let n = detail.style.display;
            if(n === 'none') {
                //当前是隐藏的，我们让其显示
                detail.style.display = 'block';
                box.style.borderBottomColor = '#FFF'; 
            }else{
                //当前是显示的，我们让其隐藏
                detail.style.display = 'none';
                box.style.borderBottomColor = 'lightcoral'; 
            }

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