原生js显示和隐藏

Posted 2020-12-12 碧果果

一、display默认属性值的选择

显示的元素设置的值分情况

（如果选择属性值错误，会影响已经写好的样式）

块元素的默认值是display:block
内联元素的默认值是display:inline
表格table元素的默认值是display:table
表格单元格td元素的默认值是display:table-cell
表格行tr元素的默认值是display:table-cow

隐藏的元素设置的值

display:none

二、代码演示

块级元素

function showContainer2() {
    var container1 = document.getElementById(‘container1‘);
    var container2 = document.getElementById(‘container2‘);
    container1.style.display = "none";
    container2.style.display = "block";
}

 

行内元素

function hiddenDiv4(divID) {
    if (divID != null && divID != "") {
        var fugai4Hidden = document.getElementById(divID);
        if (fugai4Hidden.style.display == "none") {
            fugai4Hidden.style.display = "inline";
        }
    }
}