在網頁開發中，經常會有需要通過點擊按鈕或其他交互方式來改變網頁元素的顯示和隱藏狀態的需求。而實現這個功能可以使用JavaScript代碼來操作DOM元素的display屬性。下面將通過幾個代碼案例來詳細解釋說明。

案例1：通過按鈕點擊顯示和隱藏內容

<button id="toggleButton">點擊切換內容</button>
<p id="content" style="display: none;">這是要顯示和隱藏的內容</p>
<br>
<script>
var toggleButton = document.getElementById("toggleButton");
var content = document.getElementById("content");
<br>
toggleButton.addEventListener("click", function() {
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
});
</script>

在這個案例中，通過給按鈕添加click事件監聽器，當按鈕被點擊時，判斷內容元素的display屬性值。如果內容元素的display屬性為none，則將其改為block，以顯示內容；如果內容元素的display屬性為block，則將其改為none，以隱藏內容。

案例2：根據復選框狀態顯示和隱藏元素

<input type="checkbox" id="checkbox">顯示/隱藏元素<br>
<p id="element" style="display: none;">這是要顯示和隱藏的元素</p>
<br>
<script>
var checkbox = document.getElementById("checkbox");
var element = document.getElementById("element");
<br>
checkbox.addEventListener("change", function() {
if (checkbox.checked) {
element.style.display = "block";
} else {
element.style.display = "none";
}
});
</script>

在這個案例中，給復選框input元素添加change事件監聽器，當復選框狀態改變時，判斷復選框的checked屬性值。如果復選框被選中，則將元素的display屬性改為block，以顯示元素；如果復選框未被選中，則將元素的display屬性改為none，以隱藏元素。

通過以上兩個案例，可以看出，通過JavaScript控制元素的顯示和隱藏可以通過操作元素的style屬性來改變元素的display屬性值。這樣簡單的操作就可以實現內容或元素的顯示和隱藏功能。

參考：<a >https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp</a>