Div etiketi HTML dökümanı içinde gizlemek için CSS yada Javascript/Jquery kullanılabilir. Gizleme işlemi sadece div etiketi değil bütün HTML elementleri içinde aynı şekilde yapılmaktadır.
Etiketi CSS ile gizlemek için display özelliğinin none yapılması gerekir.
Ayrıca visibility özelliği ile hidden yapılarak ekrandan gizlenmesi sağlanabilir. Fakat visibility özelliği kullanıldığında nesne görünmez olsa da ekranda belirli bir yer kaplayacaktır. Ekranda yer kaplamayan gizli öğeler oluşturmak için kullanılabilecek en ideal yöntem display özelliğidir.
CSS ile Div Gizleme Örneği
etiketin display özelliği none yapılarak gizleme yapılır.
|
1 2 3 4 5 6 7 8 9 10 |
<style> .gizle{ display:none; } </style> <div class="gizle"> yazılımbilisim.net </div> |
JavaScript ile Div Gizleme Örneği
Aşağıdaki örnekte butonun tıklama olayı gerçekleştiğinde div nesnesinin style.display özelliğine none değeri verilerek nesne ekrandan gizlenir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.yazilimbilisim.net</title> <style> body{ background-color: #dedfdf; } #gizle{ position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 200px; background-color: #ccc; border-radius: 3px; border:2px solid #1c1c0c; } </style> </head> <body> <div id="gizle"> <button id="btnGizle">Gizle</button> </div> <script> var btnGizle=document.getElementById("btnGizle"); btnGizle.onclick=function(){ //display özelliği none yapılarak gizleme işlemi yapılır. document.getElementById("gizle").style.display="none"; } </script> </body> </html> |
Jquery ile Div Gizleme Örneği
JavaScript örneğinde olduğu gibi butonun tıklama olayı gerçekleştiğinde div etiketinin jquery ile seçip, css metoduna gizlemek için gerekli json verisi gönderilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.yazilimbilisim.net</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <style> body{ background-color: #dedfdf; } #gizle{ position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 200px; background-color: #ccc; border-radius: 3px; border:2px solid #1c1c0c; } </style> </head> <body> <div id="gizle"> <button id="btnGizle">Gizle</button> </div> <script> $("#btnGizle").on("click",function(){ $("#gizle").css({ "display":"none" }); }); </script> </body> </html> |
Jquery kullanarak animasyonlu bir şekilde gizlemek için;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.yazilimbilisim.net</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <style> body{ background-color: #dedfdf; } #gizle{ position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 200px; background-color: #ccc; border-radius: 3px; border:2px solid #1c1c0c; } </style> </head> <body> <div id="gizle"> <button id="btnGizle">Gizle</button> </div> <script> $("#btnGizle").on("click",function(){ $("#gizle").animate({ opacity: 'hide' },1000); }); </script> </body> </html> |
adamsın adam 🙂