اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <style> .imgbox { float: left; text-align: center; width: 120px; border: 1px solid gray; margin: 4px; padding: 6px; } button { width: 100%; } </style> </head> <body> <h3>تفاوت بین display:none و visiblity: hidden</h3> <p>دستور visibility:hidden عنصر را مخفی می کند اما این عنصر هنوز در چینش، فضا را اشغال می کند. </p> <p>دستور display:none عنصر مورد نظر را از سند حذف می کند. و دیگر این عنصر هیچ فضایی را در صفحه اشغال نمی کند. </p> <div class="imgbox" id="imgbox1">Box 1<br> <img src="https://sina2.ir/images/all/content/w3css/chapter1/img_5terre.jpg" alt="Italy" style="width:100%"> <button onclick="removeElement()">Remove</button> </div> <div class="imgbox" id="imgbox2">Box 2<br> <img src="https://sina2.ir/images/all/content/w3css/chapter1/img_lights.jpg" alt="Lights" style="width:100%"> <button onclick="changeVisibility()">Hide</button> </div> <div class="imgbox">Box 3<br> <img src="https://sina2.ir/images/all/content/w3css/chapter1/img_forest.jpg" alt="Forest" style="width:100%"> <button onclick="resetElement()">Reset All</button> </div> <script> function removeElement() { document.getElementById("imgbox1").style.display = "none"; } function changeVisibility() { document.getElementById("imgbox2").style.visibility = "hidden"; } function resetElement() { document.getElementById("imgbox1").style.display = "block"; document.getElementById("imgbox2").style.visibility = "visible"; } </script> </body> </html>
