Home > Article > Web Front-end > How to show and hide in javascript
JavaScript is a widely used scripting language that can be used to add interactivity and dynamics to web pages. In many websites, it is common to need to show or hide certain elements or content based on user actions. JavaScript is a technology well suited for this kind of task.
Here are some methods on how to use JavaScript to show or hide elements or content, as well as the pros and cons of using them.
In earlier versions of JavaScript, the traditional way to show and hide elements was by modifying the "style" attribute. You can change the visibility of an element by changing its "display" attribute. When the "display" attribute is set to "none", the element is hidden; when set to "block", the element is displayed. The following is an example:
<script> function showDiv() { document.getElementById("myDiv").style.display = "block"; } function hideDiv() { document.getElementById("myDiv").style.display = "none"; } </script> <div id="myDiv"> This is my hidden div. </div> <button onclick="showDiv()">Show the div</button> <button onclick="hideDiv()">Hide the div</button>
In the above code, we use JavaScript’s getElementById
function to get the myDiv
element, and then showDiv## The
display attribute is modified in the # and
hideDiv functions to achieve the effect of displaying or hiding the element.
hide() and
show() functions in jQuery:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> function showDiv() { $("#myDiv").show(); } function hideDiv() { $("#myDiv").hide(); } </script> <div id="myDiv"> This is my hidden div. </div> <button onclick="showDiv()">Show the div</button> <button onclick="hideDiv()">Hide the div</button>In the above code, We show or hide the
myDiv element by using the
show() and
hide() functions in jQuery. Not only does this method smoothly show or hide elements, but because jQuery is better understood and easier to read than raw JavaScript, it outperforms other methods in terms of readability and maintainability of explicit code.
classList attribute and the
add() and
remove() methods. Its advantage is that it can control the display state of the element without changing its
style attribute.
<script> function toggleDiv() { var myDiv = document.getElementById("myDiv"); myDiv.classList.toggle("hidden"); } </script> <style> .hidden { display: none; } </style> <div id="myDiv"> This is my div. </div> <button onclick="toggleDiv()">Toggle the div</button>In the above code snippet, we define a CSS class "hidden" that sets the element's "display" attribute to "none" and The
classList attribute and the
toggle() method are used to add or delete the class. When the button is clicked, the "hidden" class of the
myDiv element will be added or deleted, thereby controlling the display or hidden state of the element.
<style> #myDiv { opacity: 1; transition: opacity 0.5s ease-in-out; /* 设置 opacity 过渡时间为0.5秒,以及其中断点的加速度 */ visibility: visible; } #myDiv.hidden { opacity: 0; visibility: hidden; } </style> <script> function toggleDiv() { var myDiv = document.getElementById("myDiv"); myDiv.classList.toggle("hidden"); } </script> <div id="myDiv"> This is my div. </div> <button onclick="toggleDiv()">Toggle the div</button>In the above code, we use CSS animation to change the "opacity" property of the element to achieve a smooth transition. We also ensure that the
myDiv element does not take up space when it is hidden by using the "visibility" attribute. Use
classList in JavaScript to control the operation of adding or removing "hidden" classes.
The above is the detailed content of How to show and hide in javascript. For more information, please follow other related articles on the PHP Chinese website!