10种js控制div的显示隐藏代码

// 显示
document.getElementById('myDiv').style.display = 'block';

// 隐藏
document.getElementById('myDiv').style.display = 'none';

// CSS
/* .hidden { display: none; } */

// JavaScript
document.getElementById('myDiv').classList.toggle('hidden');

// 显示
document.getElementById('myDiv').removeAttribute('hidden');

// 隐藏
document.getElementById('myDiv').setAttribute('hidden', 'hidden');

// 显示
$('#myDiv').show();

// 隐藏
$('#myDiv').hide();

function isHidden(element) {
    return window.getComputedStyle(element).display === 'none';
}

// 使用示例
if (isHidden(document.getElementById('myDiv'))) {
    // 隐藏状态下的操作
} else {
    // 显示状态下的操作
}

// 显示
document.getElementById('myDiv').style.visibility = 'visible';

// 隐藏
document.getElementById('myDiv').style.visibility = 'hidden';

// 显示
document.getElementById('myDiv').style.opacity = '1';

// 隐藏
document.getElementById('myDiv').style.opacity = '0';

// 显示
document.getElementById('myDiv').style.height = 'auto';
document.getElementById('myDiv').style.overflow = 'visible';

// 隐藏
document.getElementById('myDiv').style.height = '0';
document.getElementById('myDiv').style.overflow = 'hidden';

// 显示
document.getElementById('myDiv').style.maxHeight = '100%';

// 隐藏
document.getElementById('myDiv').style.maxHeight = '0';

function animateVisibility(element, visible) {
    let start;
    function step(timestamp) {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        element.style.opacity = visible ? Math.min(progress / 100, 1) : Math.max(1 - progress / 100, 0);
        if ((visible && progress < 100) || (!visible && progress < 100)) {
            requestAnimationFrame(step);
        } else {
            element.style.display = visible ? 'block' : 'none';
        }
    }
    requestAnimationFrame(step);
}

// 使用示例
animateVisibility(document.getElementById('myDiv'), true); // 显示
animateVisibility(document.getElementById('myDiv'), false); // 隐藏