js 实现div显示

使用JavaScript显示div元素

通过设置CSS的display属性可以控制div的显示与隐藏。将display属性从none改为block或其他可见值即可显示div。

document.getElementById("myDiv").style.display = "block";

通过修改class显示div

为div元素添加或移除包含显示样式的class是更推荐的做法，这样可以更好地分离样式和逻辑。

document.getElementById("myDiv").classList.remove("hidden");
document.getElementById("myDiv").classList.add("visible");

对应的CSS样式：

.hidden {
    display: none;
}
.visible {
    display: block;
}

使用jQuery显示div

如果项目中使用了jQuery库，显示div的操作更加简洁：

$("#myDiv").show();

切换div的显示状态

可以通过判断当前显示状态来切换div的可见性：

const div = document.getElementById("myDiv");
if (div.style.display === "none") {
    div.style.display = "block";
} else {
    div.style.display = "none";
}

淡入效果显示div

使用CSS过渡或动画可以实现更平滑的显示效果：

document.getElementById("myDiv").style.opacity = "0";
document.getElementById("myDiv").style.display = "block";
requestAnimationFrame(() => {
    document.getElementById("myDiv").style.opacity = "1";
    document.getElementById("myDiv").style.transition = "opacity 0.5s";
});

动态创建并显示div

可以完全通过JavaScript创建新的div元素并显示：

const newDiv = document.createElement("div");
newDiv.id = "newDiv";
newDiv.textContent = "这是一个新创建的div";
document.body.appendChild(newDiv);