How JavaScript controls the display and hiding of page elements

In modern web design, JavaScript is everywhere and its functions are also very powerful. Among them, controlling the display and hiding of page elements is a function that many developers often need to use. This article will introduce how JavaScript controls the display and hiding of page elements.

1. Display and hide by modifying the display attribute of the element

The most basic way to hide and display page elements is by modifying the display attribute of the element. This attribute determines how the element is displayed on the page, such as block, inline, or none. Here we take the button to control the display and hiding of div elements as an example. The code is as follows:

<button>点击切换</button>
<div>这是一个 div 元素</div>
<script>
function toggleDiv() {
  var div = document.getElementById("myDiv");
  if (div.style.display === "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}
</script>

In the above code, we call the toggleDiv function in the onclick event of the button. This function switches the display and hiding of the element by getting the myDiv element and modifying its display attribute. Among them, the if judgment is used to judge the status of the current element. If it is none, it is set to block, otherwise it is set to none.

2. Display and hide by adding and removing CSS classes

Based on the above method, we can also display and hide by adding or removing CSS classes of elements. The benefit of this approach is the ability to control multiple elements simultaneously. For example, we can define a hide class in CSS:

.hide {
  display: none;
}

and then use this class in page elements:

<button>点击切换</button>
<div>这是一个 div 元素</div>
<p>这是一个段落元素</p>
<script>
function toggleElements() {
  var elements = document.querySelectorAll(".hide");
  elements.forEach(function(element) {
    if (element.classList.contains("hide")) {
      element.classList.remove("hide");
    } else {
      element.classList.add("hide");
    }
  });
}
</script>

In the above code, we add the hide class to the elements that need to be hidden. , and then use the querySelectorAll function to obtain all elements of this class and process them in a loop. In the loop, we determine whether the element contains the hide class, and if so, remove the hide class, otherwise add the hide class. In this way, you can control the display and hiding of multiple elements.

3. Display and hide by modifying the visibility attribute of the element

Another commonly used method to control the display and hiding of elements is by modifying the visibility attribute of the element. Similar to the display attribute, the visibility attribute determines whether the element is visible on the page. The optional values ​​are visible or hidden. The following is a sample code using this method:

<button>点击切换</button>
<div>这是一个 div 元素</div>
<script>
function toggleDiv() {
  var div = document.getElementById("myDiv");
  if (div.style.visibility === "hidden") {
    div.style.visibility = "visible";
  } else {
    div.style.visibility = "hidden";
  }
}
</script>

In the above code, we achieve showing and hiding by getting the myDiv element and modifying its visibility attribute. Different from the display attribute, the visibility attribute hides the element while still occupying space on the page, so if you need to occupy space, you can use this method to control the display and hiding of the element.

Conclusion

Through the above three methods, we can easily control the display and hiding of page elements. Developers can choose a control method that suits them based on actual needs to achieve the best user experience and page effects.

The above is the detailed content of How JavaScript controls the display and hiding of page elements. For more information, please follow other related articles on the PHP Chinese website!