要使用element.style
控制元素的顯示和隱藏,您可以更改元素的CSS樣式屬性display
。以下是如何使用element.style
來顯示和隱藏一個元素的示例:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<p id="myElement">Hello, World!</p>
<button onclick="toggleDisplay()">Toggle Display</button>
<script>
function toggleDisplay() {
var element = document.getElementById("myElement");
if (element.classList.contains("hidden")) {
element.classList.remove("hidden");
} else {
element.classList.add("hidden");
}
}
</script>
</body>
</html>
在這個示例中,我們有一個名為myElement
的段落元素和一個按鈕。當用戶點擊按鈕時,將調用toggleDisplay
函數。這個函數檢查元素是否包含hidden
類。如果包含,它將刪除該類以顯示元素;如果不包含,它將添加該類以隱藏元素。hidden
類在CSS中定義了display: none;
屬性,從而隱藏了元素。