javascript 动态div
JavaScript 是一种脚本语言，常用于前端开发中的交互式网页和动态效果。其中，动态 div 是 JavaScript 常见的应用之一，它可以通过改变 div 元素的属性和样式，来实现网页动态效果，比如：显示隐藏的内容、鼠标滑过效果等。本文将介绍 JavaScript 动态 div 的相关知识和实现方法。
在 JavaScript 中，动态创建 div 很常见。比如，我们可以通过下面的代码片段来创建一个 div：
<script>
var myDiv = document.createElement("div");
document.body.appendChild(myDiv);
</script>
这段代码会在页面的 body 中创建一个新的 div 元素。我们还可以通过修改该 div 的样式，来实现动态效果。
另外，动态 div 还可以用来实现鼠标滑过效果。比如，当鼠标滑过一个按钮时，我们可以动态改变该按钮的样式，来提醒用户按钮已经被选中。下面是一个实现鼠标滑过效果的例子：
<div id="myButton" onmouseover="changeButtonStyle(true)" onmouseout="changeButtonStyle(false)">
Button Text
</div>
<script>
function changeButtonStyle(selected) {
var myButton = document.getElementById("myButton");
if (selected) {
myButton.style.backgroundColor = "#FFD700";
} else {
myButton.style.backgroundColor = "";
}
}
</script>
这段代码中，我们在 div 元素中添加了 onmouseover 和 onmouseout 两个事件。当鼠标滑过时，会触发 changeButtonStyle 函数，并将 selected 参数设置为 true。此时，我们就可以通过修改 div 元素的样式，来改变按钮的外观。
除此之外，动态 div 还可以用来实现显示隐藏的效果。比如，在页面上添加一个按钮，当用户点击该按钮时，动态添加一个 div 元素并显示出来。下面是实现此效果的代码：
<button onclick="showDiv()">Show Div</button>
<script>
function showDiv() {
var myDiv = document.createElement("div");
myDiv.innerHTML = "Hello World!";
document.body.appendChild(myDiv);
}
</script>
这段代码中，我们在页面上添加了一个按钮，并将 showDiv 函数绑定到该按钮的 onclick 事件中。当用户点击该按钮时，会在页面上动态创建一个 div 元素，并将其添加到 body 元素中。
综上所述，JavaScript 动态 div 是实现网页动态效果的重要手段之一。通过修改 div 元素的属性和样式，我们可以实现很多有趣的效果，比如：鼠标滑过效果、显示隐藏的内容等。在实际开发中，我们可以根据需求灵活运用动态 div，为用户带来更好的交互体验。