原生js显示和隐藏

时间:2024-02-17 12:05:48

一、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";
        }
    }
}