在 JavaScript 中是一個非常重要的東西，它可以用來創建動態網頁、用戶界面甚至是游戲等等。本篇文章將為大家分享一些關于 JavaScript div 實例的教程，希望能夠幫助大家更好地掌握這一知識點。
首先我們來看一個簡單的 div 實例：
<div id="myDiv"></div>
<script>
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Hello World!";
</script>在上面的例子中，我們給一個空的 div 元素添加了一個 id 屬性，并在 Javascript 中使用了 getElementById 方法獲取到這個元素。然后使用 innerHTML 屬性給這個 div 元素添加了一段文本，最終顯示的結果是“Hello World!”。
下面我們再來看一個使用 div 元素創建一個簡單的圖像庫的例子。
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<style type="text/css">
#imageContainer {
width: 500px;
margin: 0 auto;
}
.image {
float: left;
width: 150px;
height: 150px;
margin: 5px;
border: 1px solid #ccc;
overflow: hidden;
cursor: pointer;
}
.image img {
width: 100%;
height: 100%;
}
#largeImageContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
text-align: center;
}
#largeImageContainer img {
max-width: 80%;
max-height: 80%;
}
#closeBtn {
background-color: #fff;
color: #000;
border: 1px solid #000;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="imageContainer">
<div class="image"><img src="img1.jpg"></div>
<div class="image"><img src="img2.jpg"></div>
<div class="image"><img src="img3.jpg"></div>
</div>
<div id="largeImageContainer">
<img id="largeImage" src="">
<div id="closeBtn">Close</div>
</div>
<script>
var imageContainer = document.getElementById("imageContainer");
var images = imageContainer.getElementsByClassName("image");
var largeImageContainer = document.getElementById("largeImageContainer");
var largeImage = document.getElementById("largeImage");
for (var i = 0; i< images.length; i++) {
images[i].addEventListener("click", function() {
var imgSrc = this.getElementsByTagName("img")[0].src;
largeImage.src = imgSrc;
largeImageContainer.style.display = "block";
})
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.addEventListener("click", function() {
largeImageContainer.style.display = "none";
})
</script>
</body>
</html>上面的例子是一個簡單的圖像庫，它包含了一個固定大小的容器（imageContainer），里面放置了三個包含圖像的 div 元素。當我們點擊其中一個元素時，會創建一個遮罩層（largeImageContainer）并在其中添加大圖像（largeImage），并通過 closeBtn 元素關閉遮罩層。這個例子相對比較復雜，但它展示了 div 元素可以做到的一些非常酷炫的事情。
總結來說，在 JavaScript 中 div 元素是非常重要的。它可以用來創建動態網頁、用戶界面和游戲等等。我們可以通過靈活運用 div 元素讓我們的頁面更加美觀和實用。以上只是我們的一些簡單例子，希望可以給大家提供一些思路。