js 实现div显示
使用 JavaScript 显示 div 元素
通过修改 style.display 属性可以控制 div 的显示与隐藏。将属性值设为 "block" 或空字符串 "" 可使 div 可见。
document.getElementById("myDiv").style.display = "block";通过类名切换显示状态
为 div 添加 CSS 类，通过 JavaScript 切换类名实现显示效果。CSS 定义显示样式，JavaScript 操作类名。
.visible {
display: block;
}
.hidden {
display: none;
}document.getElementById("myDiv").classList.add("visible");
document.getElementById("myDiv").classList.remove("hidden");使用 jQuery 显示 div
jQuery 提供简化的方法来显示隐藏元素。使用 show() 方法可快速显示 div 元素。
$("#myDiv").show();淡入效果显示 div
通过设置透明度动画实现淡入效果，jQuery 的 fadeIn() 或原生 JavaScript 结合 CSS 过渡均可实现。
$("#myDiv").fadeIn(500); // 500毫秒淡入原生 JavaScript 实现：
let div = document.getElementById("myDiv");
div.style.opacity = 0;
div.style.display = "block";
let fadeIn = setInterval(() => {
div.style.opacity = parseFloat(div.style.opacity) + 0.1;
if (div.style.opacity >= 1) clearInterval(fadeIn);
}, 50);滑动显示效果
通过改变高度属性实现滑动显示效果。jQuery 的 slideDown() 方法可直接使用。
$("#myDiv").slideDown();原生实现需结合 CSS 过渡：
.sliding {
overflow: hidden;
transition: max-height 0.5s ease;
max-height: 0;
}
.sliding.open {
max-height: 500px;
}document.getElementById("myDiv").classList.add("open");动态创建并显示 div
使用 JavaScript 动态创建 div 元素并插入到 DOM 中，创建后默认可见。
let newDiv = document.createElement("div");
newDiv.textContent = "动态创建的div";
document.body.appendChild(newDiv);响应式显示控制
根据窗口大小等条件控制 div 显示。监听 resize 事件并判断条件。
window.addEventListener("resize", function() {
let div = document.getElementById("myDiv");
div.style.display = window.innerWidth > 768 ? "block" : "none";
});定时显示 div
使用 setTimeout 延迟显示 div 元素，实现定时出现效果。
setTimeout(function() {
document.getElementById("myDiv").style.display = "block";
}, 3000); // 3秒后显示
