資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在HTML中使用JavaScript點選顯示圖片？
本文介紹如何使用JavaScript和HTML在點選時顯示圖片。文章涵蓋建立隱藏圖片、新增點選事件以及動態顯示圖片以增強使用者互動體驗。
使用者希望建立一個互動式網頁，其中圖片最初是隱藏的，可以透過點選顯示，從而增強使用者參與度並縮短頁面載入時間。挑戰在於使用JavaScript和HTML簡單高效地實現此功能。
點選顯示圖片的方法
使用style的display屬性
要使用JavaScript和HTML在點選時顯示圖片，您可以使用style物件的display屬性來根據需要隱藏和顯示圖片。
語法：此處將myImage的display屬性設定為“block”。
myImage.style.display = "block";
步驟：以下是顯示圖片的步驟。
- 步驟1：建立一個包含按鈕元素和圖片元素的HTML檔案。
- 步驟2：在圖片元素中，使用style屬性將display屬性設定為“none”。這將預設隱藏圖片。
- 步驟3：在JavaScript程式碼中，使用getElementById()方法選擇按鈕和圖片元素。
- 步驟4：使用addEventListener方法將點選事件監聽器附加到按鈕元素。
- 步驟5：在事件監聽器函式中，使用圖片元素的style.display屬性將其值從“none”更改為“block”。這將使圖片可見。
示例：透過以上步驟，您可以建立一個簡單的圖片庫或幻燈片，允許使用者透過點選按鈕或使用者介面中的其他元素來顯示和隱藏圖片。
<!DOCTYPE html>
<html>
<body>
<h2>Showing image with a click</h2>
<button id="show-image-button">Show Image</button>
<img id="my-image"
src=
"https://tutorialspoint.tw/javascript/images/javascript.jpg"
style="display: none;">
<script>
const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
myImage.style.display = "block";
});
</script>
</body>
</html>
使用classList.toggle()方法
這種方法允許您使用CSS類來控制圖片的可見性，如果您想在顯示或隱藏圖片時應用其他樣式或動畫，這將非常有用。您可以透過新增或修改CSS類以及調整事件監聽器函式中的邏輯來根據需要自定義行為。
語法：此處將myImage設定為可見。
myImage.classList.toggle("visible");
步驟：以下是顯示圖片的步驟
- 步驟1：在此示例中，HTML檔案定義了一個按鈕和一個圖片，並且圖片最初使用名為hidden的CSS類隱藏。
- 步驟2：JavaScript程式碼使用addEventListener()方法將點選事件監聽器附加到按鈕，事件監聽器函式透過使用classList.toggle()方法新增或刪除visible類來切換圖片的可見性。單擊按鈕時，visible類將新增到圖片，使其顯示。
如果再次單擊按鈕，則將刪除visible類，導致圖片再次隱藏。
示例：在下面的示例中，我們使用JavaScript中的classList.toggle方法在點選時顯示圖片。
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
.visible {
display: block;
}
</style>
</head>
<body>
<h2>Showing image with a click</h2>
<button id="show-image-button">Show Image</button>
<img id="my-image"
src=
"https://tutorialspoint.tw/javascript/images/javascript.jpg"
class="hidden">
<script>
const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
myImage.classList.toggle("visible");
});
</script>
</body>
</html>
使用hidden屬性
這種方法簡單易用，並且允許您使用標準HTML屬性來控制圖片的可見性。您可以透過調整事件監聽器函式中的邏輯來根據需要自定義行為。
語法：此處將myImage的hidden屬性設定為true。
myImage.hidden = !myImage.hidden;
步驟
- 步驟1：HTML檔案定義了一個按鈕和一個圖片，並且圖片最初使用hidden屬性隱藏。
- 步驟2：使用addEventListener()方法將點選事件監聽器附加到按鈕，事件監聽器函式透過使用hidden屬性來顯示或隱藏圖片以切換圖片的可見性。
單擊按鈕時，hidden屬性將設定為false，導致圖片顯示。如果再次單擊按鈕，hidden屬性將設定為true，導致圖片再次隱藏。
示例：在此示例中，我們使用JavaScript中圖片的hidden屬性在點選時顯示圖片。
<!DOCTYPE html>
<html>
<body>
<h2>Showing image with a click</h2>
<button id="show-image-button">Show Image</button>
<img id="my-image"
src=
"https://tutorialspoint.tw/javascript/images/javascript.jpg"
hidden>
<script>
const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
myImage.hidden = !myImage.hidden;
});
</script>
</body>
</html>
結論
CSS hidden屬性在現代瀏覽器中受支援，但在舊版瀏覽器中可能不受支援。如果您需要支援舊版瀏覽器，則可能需要使用我們前面提到的其他方法之一，例如使用style.display屬性或CSS類。
34K+ 瀏覽量
