首页 > 代码库 > dom事件

dom事件

2024-09-09 22:32:17   217人阅读

一、属性

技术分享

2、事件this

 this特殊的。表示谁点击当前的标签，那么this就代表点击的标签。即谁点击，就代表谁

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div onclick="func(123,‘123‘);">ads</div>
<div onclick="func1(this);">111</div>
<div onclick="func2(this);">222</div>
<script>
    function func(arg){
        console.log(arg);
    }
    function func1(arg){
        console.log(arg);
    }
    function func2(arg){
        console.log(arg);
    }
</script>
</body>
</html>

下面就是分别点击下面显示的内容

 技术分享

 

例子：折叠菜单

margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而pdding是内边距，是盒子的边与盒子内部元素的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            padding: 0;
            margin: 0;
        }
        .menu{
            background-color: #00CCFF;
            border:solid 2px red;
            height: 700px;
            width: 300px;
        }
        .menu .title{
            background-color: #00CC00;
            cursor:pointer ;
        }
        .menu .content{
            background-color: white;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
<div class="menu">
    <div class="item">
        <div class="title" onclick="show(this)">菜单一</div>
        <div class="content hide">
            <ul>
                <li>内容一</li>
                <li>内容二</li>
                <li>内容三</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <div class="title" onclick="show(this)">菜单二</div>
        <div class="content hide">
            <ul>
                <li>内容一</li>
                <li>内容二</li>
                <li>内容三</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <div class="title" onclick="show(this)">菜单三</div>
        <div class="content hide">
            <ul>
                <li>内容一</li>
                <li>内容二</li>
                <li>内容三</li>
            </ul>
        </div>
    </div>
</div>
<script>
    function show(arg){
        //arg当前菜单，思路点击当前菜单的时候就把下面的标签中的hide去掉
        console.log(arg);
        arg.nextElementSibling.classList.remove("hide");
        //father=item
        var father=arg.parentElement;
        //由于item数量不确定，所以要从menu的子标签开始
        var sons=father.parentElement.children;
        for(var i=0;i<sons.length;i++){
            var current_ele=sons[i];
            //这里判断的意思，如果遍历出current_ele是arg的father也就是当前点击的标签，由于需要展开内容，所以不能添加hide
            //添加hide就无法展示，如果不是当前点击的标签，由于需要他们把内容隐藏，所以需要添加hide
            if(current_ele == father){

            }else{
                current_ele.children[1].classList.add("hide");
            }
        }
    }
</script>
</body>
</html>

技术分享

 点击菜单二，就会隐藏菜单一和菜单三的内容

 

dom事件


联系
我们