CSS ব্যবহার করে এলিমেন্টের видиবিলিটি নিয়ন্ত্রণ

CSS Visibility প্রপার্টি ব্যবহার করে ডকুমেন্টে একটি এলিমেন্ট দৃশ্যমান হবে কিনা তা নির্দিষ্ট করা যায়। এলিমেন্ট রেন্ডার হওয়া সত্ত্বেও যদি CSS Visibility hidden সেট করা থাকে তবে সেটি দৃশ্যমান হবে না।

এলিমেন্টের видиবিলিটি নিয়ন্ত্রণের জন্য ব্যবহার होने वाले CSS Visibility মানগুলো:

উদাহরণ

CSS Visibility প্রপার্টির উদাহরণ (collapse):

<!DOCTYPE html> <html> <head> <title>CSS Visibility collapse</title> <style> form ,table{    width:70%;    margin: 0 auto;    text-align: center; } table, th, td {    border-collapse: collapse;    border: 1px solid black; } thead {    background-color: goldenrod; } tbody{    background-color: khaki; } tr:nth-of-type(3){    visibility: collapse; } </style> </head> <body> <form> <fieldset> <legend>CSS-Visibility-collapse</legend> <table> <thead> <tr><th>Name</th><th>Course</th></tr> </thead> <tbody> <tr><td>Joana</td><td>MBA</td></tr> <tr><td>Smith</td><td>B.Arc</td></tr> <tr><td>Xersus</td><td>M.Sc</td></tr> </tbody> </table> </fieldset> </form> </body> </html>

আউটপুট

উপরোক্ত কোডের আউটপুট:

CSS Visibility collapse প্রয়োগ না করলে:

CSS Visibility collapse প্রয়োগ করলে:

উদাহরণ

CSS Visibility hidden উদাহরণ:

<!DOCTYPE html> <html> <head> <title>CSS Visibility hidden</title> <style> form {    width:70%;    margin: 0 auto;    text-align: center; } * {    padding: 2px;    margin:5px;    box-sizing: border-box; } input[type="button"] {    border-radius: 10px; } .child{    display: inline-block;    height: 40px;    width: 40px;    color: white;    border: 4px solid black; } .child:nth-of-type(1){    background-color: #FF8A00; } .child:nth-of-type(2){    background-color: #F44336; } .child:nth-of-type(3){    background-color: #C303C3; } .child:nth-of-type(4){    background-color: #4CAF50; } .child:nth-of-type(5){    background-color: #03A9F4; } .child:nth-of-type(6){    background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS-Visibility-hidden</legend> <div id="container"> <div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div> </div><br> <input type="button" value="Hide Primary Colors" onclick="visibilityHidden()"> </fieldset> </form> <script> var primaryColor = document.getElementsByClassName('primary'); function visibilityHidden(){    for(var i=0; i<3; i++)    primaryColor[i].style.visibility = 'hidden'; } </script> </body> </html>

আউটপুট

উপরোক্ত কোডের আউটপুট:

'Hide Primary Colors' বাটনে ক্লিক করার আগে:

'Hide Primary Colors' বাটনে ক্লিক করার পরে: