JavaScript DOMBOM 使用按钮控制div显示隐藏

小半 • 2022年5月12日下午3:14 • 前端开发 • 阅读 231

 #div1 {
        width: 100px;
        height: 100px;
        background-color: #f00;
    }

    .show {
        display: block;
    }

    .hidden {
        display: none;
    }

 window.onload = function () {

        /*
        用两个按钮实现显示隐藏
        document.querySelector('#btns').onclick = function () {
            var div1 = document.querySelector('#div1');
            removeClassName(div1,'hidden');
            addClassName(div1,'show');
        }
        document.querySelector('#btnh').onclick = function () {
            var div1 = document.querySelector('#div1');
            removeClassName(div1,'show');
            addClassName(div1,'hidden');
        }
        
        */

        //用一个按钮实现显示和隐藏
        // document.querySelector('#btn').onclick = function(){
        //     var div1 = document.querySelector('#div1');
        //     if (this.value === '隐藏') {
        //         removeClassName(div1, 'show');
        //         addClassName(div1, 'hidden');
        //         this.value = "显示";
        //     } else {
        //         removeClassName(div1, 'hidden');
        //         addClassName(div1, 'show');
        //         this.value ='隐藏';
        //     }
        // };


        //在html标签中使用data-自定义英文字母='赋值' 使用if进行判断  this.dataset['自定义英文字母']='赋值'
        document.querySelector('#btn').onclick = function () {
            var div1 = document.querySelector('#div1');
            if (this.dataset['idea'] === 'h') {
                removeClassName(div1, 'show');
                addClassName(div1, 'hidden');
                this.dataset['idea'] = "s";
            } else {
                removeClassName(div1, 'hidden');
                addClassName(div1, 'show');
                this.dataset['idea'] = "h";
            }
        };
    }


    <!-- 一个按钮
        <input style="width: 100px;margin-bottom: 5px;" type="button" id="btn" value="隐藏" idea=""> -->
    <input type="button" value="我是按钮" id="btn" data-idea="h">
    <div id="div1" class="show"></div>


    <!--    两个按钮
         <input type="button" id="btns" value="显示" />
         <input type="button" id="btnh" value="隐藏" /> 
    -->

从外部引入的js封装函数代码

//封装成函数
function addClassName(element, className1) { //c2 c3
    //1.判断是否已经存在
    var classNames = element.className.split(' ');
    // c1 c2

    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i] === className1) {
            break;

        }
    }
    //没找到
    if (i === classNames.length) {
        if (element.className === "") {
            element.className = className1;
        } else {
            element.className += ' ' + className1;
        }

    }
}


function removeClassName(element, className1) {

    //1.判断是否已经存在
    var classNames = element.className.split(' ');
    // c1 c2

    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i] === className1) {
            break;

        }
    }
    //找到7
    if (i !== classNames.length) {
        classNames.splice(i, 1);
        element.className = classNames.join(' ');
    }
}